11
This commit is contained in:
parent
99fa5950b8
commit
c810ff144b
|
|
@ -6,6 +6,10 @@
|
|||
height='45'></u-navbar>
|
||||
<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
|
||||
:show-location="true" :markers="markers" :polygons="polyline" @markertap="onMarkerTap">
|
||||
<cover-view class="park" @click="toggleIconAndCallout">
|
||||
<cover-image class="img" src="https://lxnapi.ccttiot.com/bike/img/static/uRiYQZQEb3l2LsltEsyW"
|
||||
mode=""></cover-image>
|
||||
</cover-view>
|
||||
</map>
|
||||
<view class="bot">
|
||||
<view class="btn" @click="topage()">
|
||||
|
|
@ -81,6 +85,44 @@
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
toggleIconAndCallout() {
|
||||
this.showIconAndCallout = !this.showIconAndCallout;
|
||||
if (this.showIconAndCallout) {
|
||||
const newMarkers = [];
|
||||
this.parkingList.forEach(item => {
|
||||
newMarkers.push({
|
||||
id: parseFloat(item.parkingId),
|
||||
latitude: parseFloat(item.latitude),
|
||||
longitude: parseFloat(item.longitude),
|
||||
width: 20,
|
||||
height: 28.95,
|
||||
iconPath: item.type == 1 ?
|
||||
'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3' : item
|
||||
.type == 2 ?
|
||||
'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t' :
|
||||
' https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq',
|
||||
callout: {
|
||||
content: item.parkingName,
|
||||
color: '#ffffff',
|
||||
fontSize: 14,
|
||||
borderRadius: 10,
|
||||
bgColor: item.type == 1 ? '#3A7EDB' : item.type == 2 ? '#FFC107' :
|
||||
'#FF473E',
|
||||
padding: 6,
|
||||
display: 'ALWAYS'
|
||||
},
|
||||
isCalloutVisible: true // 添加标记
|
||||
});
|
||||
});
|
||||
this.$set(this, 'markers', [...this.markers, ...newMarkers]);
|
||||
} else {
|
||||
// 过滤掉所有气泡显示的标记
|
||||
this.$set(this, 'markers', this.markers.filter(marker => !marker.isCalloutVisible));
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
onMarkerTap(e) {
|
||||
console.log('点击了标记：', e);
|
||||
this.sn = e.detail.markerId;
|
||||
|
|
@ -92,7 +134,10 @@
|
|||
});
|
||||
},
|
||||
getmarks() {
|
||||
this.$u.get(`/appVerify/adminOrder/list?adminId=` + this.userId).then((res) => {
|
||||
let data ={
|
||||
areaId:this.areaId
|
||||
}
|
||||
this.$u.get(`/appVerify/adminOrder/list?adminId=` ,data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
console.log('调用了');
|
||||
this.listData = res.rows;
|
||||
|
|
@ -259,8 +304,11 @@
|
|||
|
||||
},
|
||||
getParking() {
|
||||
// 发送请求获取数据
|
||||
this.$u.get('/app/parking/list').then((res) => {
|
||||
// 发送请求获取数据\
|
||||
let data ={
|
||||
areaId:this.areaId
|
||||
}
|
||||
this.$u.get('/app/parking/list?',data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
// 处理接口返回的数据
|
||||
const type1Data = [];
|
||||
|
|
@ -294,66 +342,7 @@
|
|||
this.polyline = this.polyline.concat(polylines);
|
||||
|
||||
// console.log(this.polyline);
|
||||
res.rows.forEach(item => {
|
||||
if(item.type==1){
|
||||
this.markers.push({
|
||||
id: parseFloat(item.parkingId),
|
||||
latitude: parseFloat(item.latitude),
|
||||
longitude: parseFloat(item.longitude),
|
||||
width: 20,
|
||||
height: 40,
|
||||
iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u9yz0bKCWKyev0JYpTne',
|
||||
callout: {
|
||||
content: item.parkingName, // 修改为你想要显示的文字内容
|
||||
color: '#ffffff', // 修改为文字颜色
|
||||
fontSize: 14, // 修改为文字大小
|
||||
borderRadius: 10, // 修改为气泡圆角大小
|
||||
bgColor: '#3A7EDB', // 修改为气泡背景颜色
|
||||
padding: 6, // 修改为气泡内边距
|
||||
display: 'ALWAYS' // 修改为气泡的显示策略
|
||||
}
|
||||
});
|
||||
}else if(item.type==2){
|
||||
this.markers.push({
|
||||
id: parseFloat(item.parkingId),
|
||||
latitude: parseFloat(item.latitude),
|
||||
longitude: parseFloat(item.longitude),
|
||||
width: 20,
|
||||
height: 40,
|
||||
iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u9yz0bKCWKyev0JYpTne',
|
||||
callout: {
|
||||
content: item.parkingName, // 修改为你想要显示的文字内容
|
||||
color: '#ffffff', // 修改为文字颜色
|
||||
fontSize: 14, // 修改为文字大小
|
||||
borderRadius: 10, // 修改为气泡圆角大小
|
||||
bgColor: '#FFC107', // 修改为气泡背景颜色
|
||||
padding: 6, // 修改为气泡内边距
|
||||
display: 'ALWAYS' // 修改为气泡的显示策略
|
||||
}
|
||||
});
|
||||
}else if(item.type==3){
|
||||
this.markers.push({
|
||||
id: parseFloat(item.parkingId),
|
||||
latitude: parseFloat(item.latitude),
|
||||
longitude: parseFloat(item.longitude),
|
||||
width: 20,
|
||||
height: 40,
|
||||
iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u9yz0bKCWKyev0JYpTne',
|
||||
callout: {
|
||||
content: item.parkingName, // 修改为你想要显示的文字内容
|
||||
color: '#ffffff', // 修改为文字颜色
|
||||
fontSize: 14, // 修改为文字大小
|
||||
borderRadius: 10, // 修改为气泡圆角大小
|
||||
bgColor: '#FF473E', // 修改为气泡背景颜色
|
||||
padding: 6, // 修改为气泡内边距
|
||||
display: 'ALWAYS' // 修改为气泡的显示策略
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
setTimeout(()=>{
|
||||
|
||||
},200)
|
||||
this.parkingList = res.rows
|
||||
|
||||
}
|
||||
}).catch(error => {
|
||||
|
|
@ -387,8 +376,28 @@
|
|||
width: 750rpx;
|
||||
|
||||
.map {
|
||||
position: relative;
|
||||
width: 750rpx;
|
||||
height: 1250rpx;
|
||||
|
||||
.park {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
right: 30rpx;
|
||||
bottom: 200rpx;
|
||||
// background-color: #fff;
|
||||
border-radius: 50%;
|
||||
width: 82rpx;
|
||||
height: 82rpx;
|
||||
z-index: 10;
|
||||
|
||||
.img {
|
||||
width: 82rpx;
|
||||
height: 82rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bot {
|
||||
|
|
|
|||
|
|
@ -63,9 +63,12 @@
|
|||
<view class="cont_info_left">
|
||||
故障部位
|
||||
</view>
|
||||
<view class="cont_info_right">
|
||||
<view class="cont_info_right" v-if="item.faultTypeStr">
|
||||
{{item.faultTypeStr}}
|
||||
</view>
|
||||
<view class="cont_info_right" v-else>
|
||||
--
|
||||
</view>
|
||||
</view>
|
||||
<view class="card_bot">
|
||||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uklW7KIegcLR6E7DTOGO" mode=""></image>
|
||||
|
|
@ -134,16 +137,19 @@
|
|||
<view class="stause" v-if="item.status==4">
|
||||
已完成
|
||||
</view>
|
||||
<view class="stause" v-if="item.status==2&&item.type==2">
|
||||
<view class="stause" v-if="item.status==4" style="background-color: #3BBBA1 ;">
|
||||
已完成
|
||||
</view>
|
||||
<view class="stause" v-if="item.status==2&&item.type==2" style="background-color: #F76D6D ;">
|
||||
待换电
|
||||
</view>
|
||||
<view class="stause" v-if="item.status==2&&item.type==1">
|
||||
<view class="stause" v-if="item.status==2&&item.type==1" style="background-color: #F76D6D ;">
|
||||
待维修
|
||||
</view>
|
||||
<view class="stause" v-if="item.status==3&&item.type==2">
|
||||
<view class="stause" v-if="item.status==3&&item.type==2" style="background-color: #4C97E7 ;">
|
||||
换电中
|
||||
</view>
|
||||
<view class="stause" v-if="item.status==3&&item.type==1">
|
||||
<view class="stause" v-if="item.status==3&&item.type==1" style="background-color: #4C97E7 ;">
|
||||
维修中
|
||||
</view>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
时长：{{ item.duration }}
|
||||
</view>
|
||||
<view class="info" v-if="item.distance">
|
||||
距离：{{item.distance}}公里
|
||||
距离：{{ (item.distance / 1000).toFixed(2) }} 公里
|
||||
</view>
|
||||
<view class="info" v-else>
|
||||
距离：--公里
|
||||
|
|
|
|||
|
|
@ -163,7 +163,7 @@
|
|||
},
|
||||
getword(id) {
|
||||
|
||||
this.$u.get("/app/article/list??classifyId="+id ).then((res) => {
|
||||
this.$u.get("/app/article/list?classifyId="+id ).then((res) => {
|
||||
|
||||
if (res.code == 200) {
|
||||
this.wordlist = res.rows
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@
|
|||
height='45'></u-navbar>
|
||||
<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
|
||||
:show-location='true' :markers="markers" :polygons="polygons" :polyline="polyline"> </map>
|
||||
|
||||
<view class="park" @click="toggleIconAndCallout">
|
||||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uRiYQZQEb3l2LsltEsyW" mode=""></image>
|
||||
</view>
|
||||
<!-- <map class="map" id="map" ref="map"
|
||||
\> </map> -->
|
||||
<view class="bot_btn" v-if="false">
|
||||
|
|
@ -54,7 +56,8 @@
|
|||
骑行距离
|
||||
</view>
|
||||
<view class="right" style="font-size:26rpx ;" v-if="orderInfo.distance">
|
||||
{{orderInfo.distance}}公里
|
||||
<!-- {{orderInfo.distance}}公里 -->
|
||||
{{ (orderInfo.distance / 1000).toFixed(2) }} 公里
|
||||
</view>
|
||||
<view class="right" style="font-size:26rpx ;" v-else>
|
||||
--公里
|
||||
|
|
@ -100,6 +103,7 @@
|
|||
orderId: '',
|
||||
orderInfo: {},
|
||||
loading: false,
|
||||
showIconAndCallout:false
|
||||
|
||||
}
|
||||
},
|
||||
|
|
@ -257,7 +261,10 @@
|
|||
},
|
||||
getParking() {
|
||||
// 发送请求获取数据
|
||||
this.$u.get('/app/parking/list').then((res) => {
|
||||
let data={
|
||||
areaId:this.orderInfo.areaId
|
||||
}
|
||||
this.$u.get('/app/parking/list?',data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
// 处理接口返回的数据
|
||||
const type1Data = [];
|
||||
|
|
@ -291,69 +298,47 @@
|
|||
this.polygons = this.polygons.concat(polylines);
|
||||
|
||||
// console.log(this.polyline);
|
||||
res.rows.forEach(item => {
|
||||
if(item.type==1){
|
||||
this.markers.push({
|
||||
id: parseFloat(item.parkingId),
|
||||
latitude: parseFloat(item.latitude),
|
||||
longitude: parseFloat(item.longitude),
|
||||
width: 20,
|
||||
height: 40,
|
||||
iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u9yz0bKCWKyev0JYpTne',
|
||||
callout: {
|
||||
content: item.parkingName, // 修改为你想要显示的文字内容
|
||||
color: '#ffffff', // 修改为文字颜色
|
||||
fontSize: 14, // 修改为文字大小
|
||||
borderRadius: 10, // 修改为气泡圆角大小
|
||||
bgColor: '#3A7EDB', // 修改为气泡背景颜色
|
||||
padding: 6, // 修改为气泡内边距
|
||||
display: 'ALWAYS' // 修改为气泡的显示策略
|
||||
}
|
||||
});
|
||||
}else if(item.type==2){
|
||||
this.markers.push({
|
||||
id: parseFloat(item.parkingId),
|
||||
latitude: parseFloat(item.latitude),
|
||||
longitude: parseFloat(item.longitude),
|
||||
width: 20,
|
||||
height: 40,
|
||||
iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u9yz0bKCWKyev0JYpTne',
|
||||
callout: {
|
||||
content: item.parkingName, // 修改为你想要显示的文字内容
|
||||
color: '#ffffff', // 修改为文字颜色
|
||||
fontSize: 14, // 修改为文字大小
|
||||
borderRadius: 10, // 修改为气泡圆角大小
|
||||
bgColor: '#FFC107', // 修改为气泡背景颜色
|
||||
padding: 6, // 修改为气泡内边距
|
||||
display: 'ALWAYS' // 修改为气泡的显示策略
|
||||
}
|
||||
});
|
||||
}else if(item.type==3){
|
||||
this.markers.push({
|
||||
id: parseFloat(item.parkingId),
|
||||
latitude: parseFloat(item.latitude),
|
||||
longitude: parseFloat(item.longitude),
|
||||
width: 20,
|
||||
height: 40,
|
||||
iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u9yz0bKCWKyev0JYpTne',
|
||||
callout: {
|
||||
content: item.parkingName, // 修改为你想要显示的文字内容
|
||||
color: '#ffffff', // 修改为文字颜色
|
||||
fontSize: 14, // 修改为文字大小
|
||||
borderRadius: 10, // 修改为气泡圆角大小
|
||||
bgColor: '#FF473E', // 修改为气泡背景颜色
|
||||
padding: 6, // 修改为气泡内边距
|
||||
display: 'ALWAYS' // 修改为气泡的显示策略
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
this.parkingList = res.rows
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error("Error fetching parking data:", error);
|
||||
});
|
||||
},
|
||||
toggleIconAndCallout() {
|
||||
this.showIconAndCallout = !this.showIconAndCallout;
|
||||
if (this.showIconAndCallout) {
|
||||
const newMarkers = [];
|
||||
this.parkingList.forEach(item => {
|
||||
newMarkers.push({
|
||||
id: parseFloat(item.parkingId),
|
||||
latitude: parseFloat(item.latitude),
|
||||
longitude: parseFloat(item.longitude),
|
||||
width: 20,
|
||||
height: 28.95,
|
||||
iconPath: item.type == 1 ?'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3':item.type == 2 ?'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t' :' https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq',
|
||||
callout: {
|
||||
content: item.parkingName,
|
||||
color: '#ffffff',
|
||||
fontSize: 14,
|
||||
borderRadius: 10,
|
||||
bgColor: item.type == 1 ? '#3A7EDB' : item.type == 2 ? '#FFC107' :
|
||||
'#FF473E',
|
||||
padding: 6,
|
||||
display: 'ALWAYS'
|
||||
},
|
||||
isCalloutVisible: true // 添加标记
|
||||
});
|
||||
});
|
||||
this.$set(this, 'markers', [...this.markers, ...newMarkers]);
|
||||
} else {
|
||||
// 过滤掉所有气泡显示的标记
|
||||
this.$set(this, 'markers', this.markers.filter(marker => !marker.isCalloutVisible));
|
||||
}
|
||||
|
||||
},
|
||||
getArea() {
|
||||
// this.$u.get("/app/area/" + this.orderInfo.areaId).then((res) => {
|
||||
|
||||
this.$u.get("/app/area/" + this.orderInfo.areaId).then((res) => {
|
||||
|
||||
|
|
@ -400,6 +385,7 @@
|
|||
this.loading = true;
|
||||
|
||||
this.getArea();
|
||||
if(res.data.tripRouteStr){
|
||||
let abb;
|
||||
try {
|
||||
abb = JSON.parse(res.data.tripRouteStr);
|
||||
|
|
@ -433,6 +419,8 @@
|
|||
this.latitude = parseFloat(abb[0][1]);
|
||||
this.longitude = parseFloat(abb[0][0]);
|
||||
}
|
||||
}
|
||||
|
||||
uni.hideLoading();
|
||||
}
|
||||
}).catch(error => {
|
||||
|
|
@ -456,7 +444,24 @@
|
|||
width: 750rpx;
|
||||
height: 100vh;
|
||||
}
|
||||
.park {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
right: 30rpx;
|
||||
bottom: 500rpx;
|
||||
// background-color: #fff;
|
||||
border-radius: 50%;
|
||||
width: 82rpx;
|
||||
height: 82rpx;
|
||||
z-index: 10;
|
||||
|
||||
.img {
|
||||
width: 82rpx;
|
||||
height: 82rpx;
|
||||
}
|
||||
}
|
||||
.bot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
title-size='36' height='36'></u-navbar> -->
|
||||
<map class="map" id="map" ref="map" :scale="zoomSize" show-location v-if="showmap" :latitude="latitude"
|
||||
:longitude="longitude" :show-location="true" :markers="markers" :polygons="polyline"
|
||||
@markertap="onMarkerTap" @tap="onMapTap">
|
||||
@markertap="onMarkerTap" @tap="onMapTap" @regionchange="onMapRegionChange">
|
||||
|
||||
</map>
|
||||
<view class="my-location" @click="setMapScale">
|
||||
|
|
@ -262,7 +262,7 @@
|
|||
<view class="text">
|
||||
可继续行驶{{OrderdeviceInfos.remainingMileage}}公里
|
||||
</view>
|
||||
<view class="speed">
|
||||
<view class="speed" style="background: #ccc; ">
|
||||
<view class="speeds" :style="{ width: OrderdeviceInfos.remainingPower + '%' }">
|
||||
|
||||
</view>
|
||||
|
|
@ -301,7 +301,7 @@
|
|||
@click="unloackdevices()">
|
||||
解锁用车
|
||||
</view>
|
||||
<view class="btn1" @click="backDevice()">
|
||||
<view class="btn1" @click="backDevicecar()">
|
||||
还车
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -373,9 +373,12 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="guangggao">
|
||||
<view class="guangggao" v-if="gps.deptId==100">
|
||||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uvHYQhuouHZQQL3qfLzP" mode=""></image>
|
||||
</view>
|
||||
<view class="guangggao" v-if="gps.deptId==101" @click="gotowzysd()">
|
||||
<image src="https://lxnapi.ccttiot.com/bike/img/static/un0FWzTJzJ35dYU7mgdl" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tipss_box">
|
||||
|
|
@ -583,6 +586,27 @@
|
|||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 是否确认还车 -->
|
||||
<u-mask :show="isbackcar" :z-index='100' duration='0' />
|
||||
<view class="pops" @click="isbackcar = false" v-if="isbackcar">
|
||||
<view class="tit" style="font-weight: 600;">
|
||||
温馨提示
|
||||
</view>
|
||||
<view class="cont_box" style="text-align: center;color: #808080;justify-content: center;font-size: 36rpx;">
|
||||
为了避免误触，请问是否确定还车
|
||||
</view>
|
||||
|
||||
<view class="btn_box">
|
||||
<view class="btn1" @click="isbackcar = false">
|
||||
取消
|
||||
</view>
|
||||
<view class="btn2" @click="backDevice()">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -680,7 +704,8 @@
|
|||
isnoline: false,
|
||||
carstause: false,
|
||||
|
||||
isbackdevice: false
|
||||
isbackdevice: false,
|
||||
isbackcar:false
|
||||
|
||||
}
|
||||
},
|
||||
|
|
@ -734,31 +759,31 @@
|
|||
}, 500)
|
||||
},
|
||||
onShow() {
|
||||
this.timers = setInterval(() => {
|
||||
// console.log('定时器运行中...');
|
||||
this.getmarks()
|
||||
// 在这里执行你的逻辑
|
||||
}, 3000); // 每秒执行一次
|
||||
// this.timers = setInterval(() => {
|
||||
// // console.log('定时器运行中...');
|
||||
// this.getmarks()
|
||||
// // 在这里执行你的逻辑
|
||||
// }, 3000); // 每秒执行一次
|
||||
|
||||
if (this.seeDetail == false) {
|
||||
|
||||
|
||||
let that = this
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
type: 'gcj02',
|
||||
success: function(lb) {
|
||||
that.latitude = 23.440359
|
||||
that.longitude =117.074552
|
||||
that.gps.latitude =23.440359
|
||||
that.gps.longitude = 117.074552;
|
||||
// that.latitude = 23.440359
|
||||
// that.longitude = 117.074552
|
||||
// that.gps.latitude = 23.440359
|
||||
// that.gps.longitude = 117.074552;
|
||||
|
||||
|
||||
|
||||
// that.gps.latitude = lb.latitude;
|
||||
// that.gps.longitude = lb.longitude;
|
||||
that.gps.latitude = lb.latitude;
|
||||
that.gps.longitude = lb.longitude;
|
||||
|
||||
// that.latitude = Number(lb.latitude.toFixed(5)) - 0.005
|
||||
// that.longitude = Number(lb.longitude.toFixed(5)) + 0.005
|
||||
that.latitude = Number(lb.latitude.toFixed(5)) - 0.005
|
||||
that.longitude = Number(lb.longitude.toFixed(5)) + 0.005
|
||||
|
||||
|
||||
console.log(that.areaInfo, 'that.areaInfo');
|
||||
|
|
@ -888,10 +913,97 @@
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
backDevicecar(){
|
||||
this.isbackcar=true
|
||||
},
|
||||
gotowzysd() {
|
||||
uni.navigateToMiniProgram({
|
||||
appId: 'wxd7c0bb79b9d616c3', //目标小程序appid
|
||||
path: '/pages/index/index', //需要打开的目标路径
|
||||
extraData: {
|
||||
'data1': 'test'
|
||||
},
|
||||
envVersion: 'trial', //小程序版本：develop（开发版），trial（体验版），release（正式版）
|
||||
success(res) {
|
||||
// 打开成功
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
onMapRegionChange(event) {
|
||||
console.log('regionchange', event)
|
||||
if (event.detail.type == 'end') {
|
||||
// this.getCenterLanLat()
|
||||
}
|
||||
// 你可以在这里执行你需要的操作
|
||||
},
|
||||
getCenterLanLat() {
|
||||
let that = this
|
||||
uni.createMapContext("map", this).getCenterLocation({
|
||||
type: 'gcj02',
|
||||
success: (res) => {
|
||||
console.log("当前地图中心的经纬度", res)
|
||||
that.gps.latitude = res.latitude;
|
||||
that.gps.longitude = res.longitude;
|
||||
that.getAreas()
|
||||
//其他逻辑
|
||||
},
|
||||
fail: (err) => {}
|
||||
})
|
||||
},
|
||||
getAreas() {
|
||||
|
||||
this.$u.get('/app/area/info?', this.gps).then((res) => {
|
||||
this.showmap = true
|
||||
if (res.code === 200) {
|
||||
|
||||
// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
|
||||
const polylines = this.convertBoundaryToPolyline(res.data.boundaryStr)
|
||||
// console.log(polylines,'polylinespolylinespolylines');
|
||||
// .filter(area => area.boundaryStr) // 过滤掉boundary为空的数据
|
||||
// .map(area => this.convertBoundaryToPolyline(area.boundaryStr));
|
||||
// 更新折线数据
|
||||
this.areaInfo = res.data
|
||||
this.polyline.push(polylines)
|
||||
console.log();
|
||||
// console.log(this.areaInfo, 'areaInfoareaInfo');
|
||||
uni.setStorageSync('areaId', res.data.areaId);
|
||||
// this.getinfo()
|
||||
// this.getmarks()
|
||||
// this.getlist()
|
||||
this.getParking()
|
||||
|
||||
|
||||
|
||||
|
||||
// this.setMapScale()
|
||||
// if(!hasShownPopup){
|
||||
// console.log(typeof(hasShownPopup),'hasShownPopuphasShownPopup');
|
||||
// this.showTips=uni.getStorageSync('hasShownPopup')
|
||||
// }else{
|
||||
// this.showTips=true
|
||||
// uni.setStorageSync('hasShownPopup', true);
|
||||
// }
|
||||
|
||||
// this.$store.commit('SET_SHOWTIPS', true);
|
||||
// console.log(this.polyline);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error("Error fetching area data:", error);
|
||||
});
|
||||
},
|
||||
|
||||
keepback() {
|
||||
let that = this
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
type: 'gcj02',
|
||||
success: function(lb) {
|
||||
|
||||
|
||||
|
|
@ -950,7 +1062,7 @@
|
|||
onlinebackDevice() {
|
||||
let that = this
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
type: 'gcj02',
|
||||
success: function(lb) {
|
||||
|
||||
|
||||
|
|
@ -1245,7 +1357,7 @@
|
|||
setTimeout(() => {
|
||||
let that = this
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
type: 'gcj02',
|
||||
success: function(lb) {
|
||||
|
||||
|
||||
|
|
@ -1345,7 +1457,7 @@
|
|||
setTimeout(() => {
|
||||
let that = this
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
type: 'gcj02',
|
||||
success: function(lb) {
|
||||
|
||||
|
||||
|
|
@ -1354,10 +1466,12 @@
|
|||
longitude: lb.longitude,
|
||||
areaId: that.areaInfo.areaId
|
||||
}
|
||||
that.$u.post('/appVerify/device/lock?sn=' + that.OrderdeviceInfos.sn + '&orderNo=' +
|
||||
that.$u.post('/appVerify/device/lock?sn=' + that.OrderdeviceInfos
|
||||
.sn + '&orderNo=' +
|
||||
that
|
||||
.orderinfo
|
||||
.orderNo + '&isBluetooth=true'+ '&lon=' + lb.longitude + '&lat='+lb.latitude).then((res) => {
|
||||
.orderNo + '&isBluetooth=true' + '&lon=' + lb.longitude +
|
||||
'&lat=' + lb.latitude).then((res) => {
|
||||
|
||||
if (res.code === 200) {
|
||||
that.getisInOrder()
|
||||
|
|
@ -1447,8 +1561,7 @@
|
|||
uni.showToast({
|
||||
title: '连接成功',
|
||||
icon: 'none'
|
||||
});
|
||||
{
|
||||
}); {
|
||||
|
||||
xBlufi.notifyInitBleEsp32({
|
||||
deviceId: options.data.deviceId
|
||||
|
|
@ -1665,22 +1778,22 @@
|
|||
|
||||
}
|
||||
// 直接从OrderdeviceInfos对象创建一个新的标记，并标记为设备特定标记
|
||||
const newMarker = {
|
||||
id: parseFloat(this.OrderdeviceInfos.sn),
|
||||
latitude: parseFloat(this.OrderdeviceInfos.latitude),
|
||||
longitude: parseFloat(this.OrderdeviceInfos.longitude),
|
||||
width: 40,
|
||||
height: 28,
|
||||
isDeviceMarker: true, // 添加标识属性
|
||||
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uF9qLejuAZErNTrRuHq7',
|
||||
};
|
||||
// const newMarker = {
|
||||
// id: parseFloat(this.OrderdeviceInfos.sn),
|
||||
// latitude: parseFloat(this.OrderdeviceInfos.latitude),
|
||||
// longitude: parseFloat(this.OrderdeviceInfos.longitude),
|
||||
// width: 40,
|
||||
// height: 28,
|
||||
// isDeviceMarker: true, // 添加标识属性
|
||||
// iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uF9qLejuAZErNTrRuHq7',
|
||||
// };
|
||||
|
||||
// 保留显示气泡的标记和设备特定标记
|
||||
const preservedMarkers = this.markers.filter(marker => marker.isCalloutVisible || marker
|
||||
.isDeviceMarker);
|
||||
// 使用单个新标记更新markers数组，如果需要保留之前的标记也可以加入
|
||||
this.markers = [newMarker, ...preservedMarkers];
|
||||
this.oldMarkers = [...this.markers];
|
||||
// // 保留显示气泡的标记和设备特定标记
|
||||
// const preservedMarkers = this.markers.filter(marker => marker.isCalloutVisible || marker
|
||||
// .isDeviceMarker);
|
||||
// // 使用单个新标记更新markers数组，如果需要保留之前的标记也可以加入
|
||||
// this.markers = [newMarker, ...preservedMarkers];
|
||||
// this.oldMarkers = [...this.markers];
|
||||
|
||||
} else {
|
||||
// 处理接口返回错误的情况
|
||||
|
|
@ -2795,7 +2908,11 @@
|
|||
longitude: parseFloat(item.longitude),
|
||||
width: 20,
|
||||
height: 28.95,
|
||||
iconPath: item.type == 1 ?'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3':item.type == 2 ?'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t' :' https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq',
|
||||
iconPath: item.type == 1 ?
|
||||
'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3' : item
|
||||
.type == 2 ?
|
||||
'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t' :
|
||||
' https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq',
|
||||
callout: {
|
||||
content: item.parkingName,
|
||||
color: '#ffffff',
|
||||
|
|
@ -2975,7 +3092,7 @@
|
|||
|
||||
}
|
||||
|
||||
this.setMapScale()
|
||||
// this.setMapScale()
|
||||
// if(!hasShownPopup){
|
||||
// console.log(typeof(hasShownPopup),'hasShownPopuphasShownPopup');
|
||||
// this.showTips=uni.getStorageSync('hasShownPopup')
|
||||
|
|
@ -3438,7 +3555,7 @@
|
|||
// uni.hideLoading();
|
||||
if (res.code == 200) {
|
||||
uni.setStorageSync('token', res.token);
|
||||
|
||||
this.getinfo()
|
||||
this.$u.get('/app/device/info?sn=' + this.sn).then((
|
||||
res) => {
|
||||
if (res.code === 200) {
|
||||
|
|
@ -3613,7 +3730,7 @@
|
|||
|
||||
.txts {
|
||||
position: absolute;
|
||||
left: 150rpx;
|
||||
left: 300rpx;
|
||||
bottom: 90rpx;
|
||||
font-weight: 500;
|
||||
font-size: 36rpx;
|
||||
|
|
@ -4075,7 +4192,8 @@
|
|||
|
||||
.card {
|
||||
|
||||
width: 500rpx !important; // 确保宽度被应用
|
||||
// max-width: 600rpx !important; // 确保宽度被应用
|
||||
width: 450rpx !important;
|
||||
height: 288rpx;
|
||||
margin-right: 20rpx;
|
||||
position: relative;
|
||||
|
|
@ -4098,7 +4216,8 @@
|
|||
justify-content: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 350rpx;
|
||||
// width: 350rpx;
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
background: #4C97E7;
|
||||
border-radius: 0rpx 0rpx 16rpx 16rpx;
|
||||
|
|
@ -4314,7 +4433,7 @@
|
|||
margin-top: 18rpx;
|
||||
width: 226rpx;
|
||||
height: 22rpx;
|
||||
background: #ccc;
|
||||
background: red;
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
|
||||
.speeds {
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@
|
|||
latitude: 0,
|
||||
longitude: 0,
|
||||
isMap: false,
|
||||
zoomSize: 15,
|
||||
zoomSize: 13,
|
||||
markers: [],
|
||||
polyline: [],
|
||||
polygons: [],
|
||||
|
|
@ -135,7 +135,7 @@
|
|||
infonum: {},
|
||||
rangeMin: 0,
|
||||
rangMax: 100,
|
||||
rangeValue: [1, 99],
|
||||
rangeValue: [1, 100],
|
||||
status0: [], //未上架
|
||||
status1: [], //正常
|
||||
status2: [], //预约中
|
||||
|
|
@ -184,10 +184,10 @@
|
|||
success: function(lb) {
|
||||
|
||||
|
||||
that.latitude = Number(lb.latitude.toFixed(5)) - 0.005
|
||||
that.longitude = Number(lb.longitude.toFixed(5)) + 0.005
|
||||
// that.latitude = Number(lb.latitude.toFixed(5)) - 0.005
|
||||
// that.longitude = Number(lb.longitude.toFixed(5)) + 0.005
|
||||
console.log(that.areaInfo, 'that.areaInfo');
|
||||
that.setMapScale()
|
||||
// that.setMapScale()
|
||||
// that.getmarks()
|
||||
|
||||
|
||||
|
|
@ -669,6 +669,8 @@
|
|||
this.$u.get("/app/area/" + id).then((res) => {
|
||||
|
||||
if (res.code == 200) {
|
||||
this.latitude =res.data.latitude
|
||||
this.longitude = res.data.longitude
|
||||
// this.areaInfo = res.data
|
||||
const polylines = this.convertBoundaryToPolyline(res.data.boundaryStr)
|
||||
this.polyline.push(polylines)
|
||||
|
|
|
|||
|
|
@ -86,8 +86,17 @@
|
|||
|
||||
</view>
|
||||
<view class="info_li">
|
||||
<view class="half_info_li">
|
||||
订单费用：{{item.totalFee}}元
|
||||
</view>
|
||||
<view class="half_info_li" v-if="item.status==4" >
|
||||
|
||||
有无退款：<span v-if="item.etRefund==null">无</span>
|
||||
<span v-else style="color: red;">有</span>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="info_li" v-if="item.unlock_time">
|
||||
开关时间：{{item.unlock_time}} {{ item.return_time ? item.return_time : '--' }}
|
||||
</view>
|
||||
|
|
@ -285,7 +294,15 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="info_li">
|
||||
<view class="half_info_li">
|
||||
订单费用：{{item.totalFee}}元
|
||||
</view>
|
||||
<view class="half_info_li" v-if="item.status==4" >
|
||||
|
||||
有无退款：<span v-if="item.etRefund==null">无</span>
|
||||
<span v-else style="color: red;">有</span>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="info_li" v-if="item.unlock_time">
|
||||
开关时间：{{item.unlock_time}} {{ item.return_time ? item.return_time : '--' }}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<u-navbar :is-back='false' title="工作台" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||
height='45'></u-navbar>
|
||||
<view class="toptit" @click="shows()">
|
||||
{{areaInfo.areaName}}
|
||||
</view>
|
||||
<!-- <u-navbar :is-back='false' title="工作台" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||
height='45'></u-navbar> -->
|
||||
|
||||
<view class="cont_box">
|
||||
<view class="top">
|
||||
|
|
@ -47,7 +50,7 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-select v-model="show" :list="list" title='选择运营区' @confirm="confirm"></u-select>
|
||||
<tab-bar :indexs='0' style=""></tab-bar>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -59,7 +62,11 @@
|
|||
bgc: {
|
||||
backgroundColor: "#FFFFFF",
|
||||
},
|
||||
sn:''
|
||||
sn:'',
|
||||
areaId:0,
|
||||
areaInfo:{},
|
||||
list: [],
|
||||
show: false
|
||||
|
||||
}
|
||||
},
|
||||
|
|
@ -68,6 +75,11 @@
|
|||
|
||||
// 执行其他操作...
|
||||
});
|
||||
if(uni.getStorageSync('adminAreaid')){
|
||||
this.areaId = uni.getStorageSync('adminAreaid')
|
||||
this.getArea()
|
||||
this.getareaList()
|
||||
}
|
||||
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -76,6 +88,51 @@
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
shows(){
|
||||
|
||||
if(this.list.length<2){
|
||||
|
||||
}else{
|
||||
this.show =true
|
||||
}
|
||||
},
|
||||
getareaList(){
|
||||
|
||||
|
||||
this.$u.get('/appVerify/getAreaList').then((res) => {
|
||||
if(res.code==200){
|
||||
this.list = res.data.map(item => ({
|
||||
value: item.areaId,
|
||||
label: item.areaName
|
||||
}));
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error("Error fetching area data:", error);
|
||||
});
|
||||
},
|
||||
confirm(e){
|
||||
// console.log(e);
|
||||
uni.setStorageSync('adminAreaid', e[0].value);
|
||||
|
||||
|
||||
|
||||
},
|
||||
getArea() {
|
||||
|
||||
let id = this.areaId
|
||||
this.$u.get("/app/area/" + id).then((res) => {
|
||||
|
||||
if (res.code == 200) {
|
||||
this.areaInfo=res.data
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
topage(num){
|
||||
if(num==0){
|
||||
uni.navigateTo({
|
||||
|
|
@ -146,7 +203,11 @@
|
|||
|
||||
.page {
|
||||
width: 750rpx;
|
||||
|
||||
.toptit{
|
||||
margin-top: 100rpx;
|
||||
margin-left: 100rpx;
|
||||
font-size: 38rpx;
|
||||
}
|
||||
.cont_box{
|
||||
padding: 46rpx 50rpx;
|
||||
margin: 68rpx auto;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@
|
|||
<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
|
||||
:show-location="true" :markers="markers" :polygons="polyline">
|
||||
<cover-view class="park" @click="toggleIconAndCallout">
|
||||
<cover-image class="img" src="https://lxnapi.ccttiot.com/bike/img/static/uRiYQZQEb3l2LsltEsyW" mode=""></cover-image>
|
||||
<cover-image class="img" src="https://lxnapi.ccttiot.com/bike/img/static/uRiYQZQEb3l2LsltEsyW"
|
||||
mode=""></cover-image>
|
||||
</cover-view>
|
||||
</map>
|
||||
|
||||
|
|
@ -89,7 +90,7 @@
|
|||
|
||||
|
||||
<view class="info_li">
|
||||
最后定位坐标
|
||||
最后定位坐标：
|
||||
<span v-if="deviceInfos.latitude">{{deviceInfos.latitude}},{{deviceInfos.longitude}}</span>
|
||||
<span v-else>--</span>
|
||||
</view>
|
||||
|
|
@ -107,19 +108,19 @@
|
|||
</view>
|
||||
<view class="info_card" style="margin-top: 20rpx;" v-if="deviceInfos.etOrders!=''">
|
||||
<view class="info_tit">
|
||||
订单信息
|
||||
最后订单信息
|
||||
</view>
|
||||
<view class="lines"></view>
|
||||
<view class="cont">
|
||||
|
||||
|
||||
<view class="info_li">
|
||||
当前用户：
|
||||
最后用户：
|
||||
<span v-if="deviceInfos.etOrders[0].phonenumber">{{deviceInfos.etOrders[0].phonenumber}}</span>
|
||||
<span v-else>--</span>
|
||||
</view>
|
||||
<view class="info_li" style="flex-wrap: wrap;display: inline-block;">
|
||||
当前订单编号：
|
||||
最后订单编号：
|
||||
<span v-if="deviceInfos.etOrders[0].orderNo">{{deviceInfos.etOrders[0].orderNo}}</span>
|
||||
<span v-else>--</span>
|
||||
</view>
|
||||
|
|
@ -128,6 +129,13 @@
|
|||
<span v-if="deviceInfos.etOrders[0].createTime">{{deviceInfos.etOrders[0].createTime}}</span>
|
||||
<span v-else>--</span>
|
||||
</view>
|
||||
<view class="info_li">
|
||||
<view class="info_li">
|
||||
|
||||
订单状态：<span>{{statuss()}}</span>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bot_btn">
|
||||
|
|
@ -177,12 +185,8 @@
|
|||
车牌号
|
||||
</view>
|
||||
<view class="ipt">
|
||||
<input type="text"
|
||||
v-model="searchKeyword"
|
||||
placeholder="0.00"
|
||||
class="input"
|
||||
placeholder-style="color:#C7CDD3"
|
||||
>
|
||||
<input type="text" v-model="searchKeyword" placeholder="0.00" class="input"
|
||||
placeholder-style="color:#C7CDD3">
|
||||
元
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -267,7 +271,7 @@
|
|||
onLoad(e) {
|
||||
this.sn = e.id
|
||||
this.deviceInfo()
|
||||
this.getArea()
|
||||
|
||||
|
||||
},
|
||||
onUnload: function() {
|
||||
|
|
@ -294,6 +298,23 @@
|
|||
|
||||
},
|
||||
methods: {
|
||||
|
||||
statuss() {
|
||||
if (this.deviceInfos.etOrders[0] != '') {
|
||||
if (this.deviceInfos.etOrders[0].status == 0) {
|
||||
return '预约中'
|
||||
} else if (this.deviceInfos.etOrders[0].status == 1) {
|
||||
return '取消预约'
|
||||
} else if (this.deviceInfos.etOrders[0].status == 2) {
|
||||
return '骑行中'
|
||||
} else if (this.deviceInfos.etOrders[0].status == 3) {
|
||||
return '骑行结束'
|
||||
} else if (this.deviceInfos.etOrders[0].status == 4) {
|
||||
return '订单完成'
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
Binddevice() {
|
||||
uni.showLoading({
|
||||
title: '连接中..'
|
||||
|
|
@ -528,7 +549,6 @@
|
|||
}
|
||||
},
|
||||
|
||||
|
||||
//4、建立连接
|
||||
createBLEConnection(e) {
|
||||
console.log('调用了');
|
||||
|
|
@ -725,6 +745,7 @@
|
|||
this.mac = res.data.mac
|
||||
this.latitude = parseFloat(this.deviceInfos.latitude)
|
||||
this.longitude = parseFloat(this.deviceInfos.longitude)
|
||||
this.getArea()
|
||||
if (this.deviceInfos.status == 0) {
|
||||
this.markers.push({
|
||||
id: parseFloat(this.deviceInfos.sn),
|
||||
|
|
@ -979,7 +1000,11 @@
|
|||
longitude: parseFloat(item.longitude),
|
||||
width: 20,
|
||||
height: 28.95,
|
||||
iconPath: item.type == 1 ?'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3':item.type == 2 ?'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t' :' https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq',
|
||||
iconPath: item.type == 1 ?
|
||||
'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3' : item
|
||||
.type == 2 ?
|
||||
'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t' :
|
||||
' https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq',
|
||||
callout: {
|
||||
content: item.parkingName,
|
||||
color: '#ffffff',
|
||||
|
|
@ -1000,9 +1025,13 @@
|
|||
}
|
||||
|
||||
},
|
||||
|
||||
getParking() {
|
||||
// 发送请求获取数据
|
||||
this.$u.get('/app/parking/list').then((res) => {
|
||||
let data = {
|
||||
areaId: this.deviceInfos.areaId
|
||||
}
|
||||
this.$u.get('/app/parking/list?', data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
// 处理接口返回的数据
|
||||
const type1Data = [];
|
||||
|
|
@ -1044,14 +1073,14 @@
|
|||
},
|
||||
getArea() {
|
||||
// 发送请求获取数据
|
||||
this.$u.get('/app/area/list').then((res) => {
|
||||
|
||||
let id = this.deviceInfos.areaId
|
||||
this.$u.get("/app/area/" + id).then((res) => {
|
||||
if (res.code === 200) {
|
||||
// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
|
||||
const polylines = res.rows
|
||||
.filter(area => area.boundaryStr) // 过滤掉boundary为空的数据
|
||||
.map(area => this.convertBoundaryToPolyline(area.boundaryStr));
|
||||
const polylines = this.convertBoundaryToPolyline(res.data.boundaryStr)
|
||||
// 更新折线数据
|
||||
this.polyline = polylines;
|
||||
this.polyline.push(polylines)
|
||||
// console.log(this.polyline);
|
||||
this.getParking()
|
||||
}
|
||||
|
|
@ -1077,6 +1106,7 @@
|
|||
position: relative;
|
||||
width: 750rpx;
|
||||
height: 752rpx;
|
||||
|
||||
.park {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
|
|
@ -1107,19 +1137,23 @@
|
|||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||
z-index: 110;
|
||||
padding-bottom: 100rpx;
|
||||
|
||||
.top {
|
||||
padding: 52rpx 38rpx 42rpx 36rpx;
|
||||
|
||||
.ipt_box {
|
||||
margin-top: 22rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
|
||||
.text {
|
||||
width: 96rpx;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
|
||||
.ipt {
|
||||
padding: 10rpx 18rpx;
|
||||
display: flex;
|
||||
|
|
@ -1130,11 +1164,13 @@
|
|||
height: 64rpx;
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
border: 2rpx solid #979797;
|
||||
|
||||
.input {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
|
@ -1142,6 +1178,7 @@
|
|||
font-size: 32rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
|
||||
.txt {
|
||||
margin-top: 32rpx;
|
||||
width: 100%;
|
||||
|
|
@ -1161,6 +1198,7 @@
|
|||
flex-wrap: nowrap;
|
||||
// height: 100%;
|
||||
bottom: -20rpx;
|
||||
|
||||
.bot_left {
|
||||
border-radius: 0rpx 0rpx 0rpx 30rpx;
|
||||
width: 50%;
|
||||
|
|
@ -1192,6 +1230,7 @@
|
|||
|
||||
}
|
||||
}
|
||||
|
||||
.bot_btn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
|
|
@ -1204,9 +1243,11 @@
|
|||
// background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
|
||||
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
|
||||
.btn:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-top: 10rpx;
|
||||
margin-right: 18rpx;
|
||||
|
|
@ -1223,6 +1264,7 @@
|
|||
color: #3D3D3D;
|
||||
}
|
||||
}
|
||||
|
||||
.info_card {
|
||||
background: #FFFFFF;
|
||||
|
||||
|
|
@ -1262,6 +1304,7 @@
|
|||
span {
|
||||
color: #3D3D3D;
|
||||
}
|
||||
|
||||
white-space: nowrap;
|
||||
/* 禁止换行 */
|
||||
overflow: hidden;
|
||||
|
|
@ -1281,6 +1324,7 @@
|
|||
span {
|
||||
color: #3D3D3D;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 30%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,12 @@
|
|||
<u-navbar title="订单详情" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||
height='45'></u-navbar>
|
||||
<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
|
||||
:show-location='true' :markers="markers" :polygons="polygons" :polyline="polyline"> </map>
|
||||
:show-location='true' :markers="markers" :polygons="polygons" :polyline="polyline">
|
||||
<cover-view class="park" @click="toggleIconAndCallout">
|
||||
<cover-image class="img" src="https://lxnapi.ccttiot.com/bike/img/static/uRiYQZQEb3l2LsltEsyW"
|
||||
mode=""></cover-image>
|
||||
</cover-view>
|
||||
</map>
|
||||
<view class="info_card">
|
||||
<view class="info_tit">
|
||||
基本信息
|
||||
|
|
@ -36,9 +41,7 @@
|
|||
行驶距离：<span>{{orderInfo.distance/1000}}Km</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info_li">
|
||||
订单状态：<span>{{status()}}</span>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="info_card" style="margin-top: 20rpx;">
|
||||
|
|
@ -236,6 +239,44 @@
|
|||
|
||||
},
|
||||
methods: {
|
||||
toggleIconAndCallout() {
|
||||
this.showIconAndCallout = !this.showIconAndCallout;
|
||||
if (this.showIconAndCallout) {
|
||||
const newMarkers = [];
|
||||
this.parkingList.forEach(item => {
|
||||
newMarkers.push({
|
||||
id: parseFloat(item.parkingId),
|
||||
latitude: parseFloat(item.latitude),
|
||||
longitude: parseFloat(item.longitude),
|
||||
width: 20,
|
||||
height: 28.95,
|
||||
iconPath: item.type == 1 ?
|
||||
'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3' : item
|
||||
.type == 2 ?
|
||||
'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t' :
|
||||
' https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq',
|
||||
callout: {
|
||||
content: item.parkingName,
|
||||
color: '#ffffff',
|
||||
fontSize: 14,
|
||||
borderRadius: 10,
|
||||
bgColor: item.type == 1 ? '#3A7EDB' : item.type == 2 ? '#FFC107' :
|
||||
'#FF473E',
|
||||
padding: 6,
|
||||
display: 'ALWAYS'
|
||||
},
|
||||
isCalloutVisible: true // 添加标记
|
||||
});
|
||||
});
|
||||
this.$set(this, 'markers', [...this.markers, ...newMarkers]);
|
||||
} else {
|
||||
// 过滤掉所有气泡显示的标记
|
||||
this.$set(this, 'markers', this.markers.filter(marker => !marker.isCalloutVisible));
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
callPhone() {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.orderInfo.phonenumber
|
||||
|
|
@ -391,7 +432,11 @@
|
|||
},
|
||||
getParking() {
|
||||
// 发送请求获取数据
|
||||
this.$u.get('/app/parking/list').then((res) => {
|
||||
|
||||
let data = {
|
||||
areaId: this.orderInfo.areaId
|
||||
}
|
||||
this.$u.get('/app/parking/list?', data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
// 处理接口返回的数据
|
||||
const type1Data = [];
|
||||
|
|
@ -425,63 +470,7 @@
|
|||
this.polygons = this.polygons.concat(polylines);
|
||||
|
||||
// console.log(this.polyline);
|
||||
res.rows.forEach(item => {
|
||||
if(item.type==1){
|
||||
this.markers.push({
|
||||
id: parseFloat(item.parkingId),
|
||||
latitude: parseFloat(item.latitude),
|
||||
longitude: parseFloat(item.longitude),
|
||||
width: 20,
|
||||
height: 40,
|
||||
iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u9yz0bKCWKyev0JYpTne',
|
||||
callout: {
|
||||
content: item.parkingName, // 修改为你想要显示的文字内容
|
||||
color: '#ffffff', // 修改为文字颜色
|
||||
fontSize: 14, // 修改为文字大小
|
||||
borderRadius: 10, // 修改为气泡圆角大小
|
||||
bgColor: '#3A7EDB', // 修改为气泡背景颜色
|
||||
padding: 6, // 修改为气泡内边距
|
||||
display: 'ALWAYS' // 修改为气泡的显示策略
|
||||
}
|
||||
});
|
||||
}else if(item.type==2){
|
||||
this.markers.push({
|
||||
id: parseFloat(item.parkingId),
|
||||
latitude: parseFloat(item.latitude),
|
||||
longitude: parseFloat(item.longitude),
|
||||
width: 20,
|
||||
height: 40,
|
||||
iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u9yz0bKCWKyev0JYpTne',
|
||||
callout: {
|
||||
content: item.parkingName, // 修改为你想要显示的文字内容
|
||||
color: '#ffffff', // 修改为文字颜色
|
||||
fontSize: 14, // 修改为文字大小
|
||||
borderRadius: 10, // 修改为气泡圆角大小
|
||||
bgColor: '#FFC107', // 修改为气泡背景颜色
|
||||
padding: 6, // 修改为气泡内边距
|
||||
display: 'ALWAYS' // 修改为气泡的显示策略
|
||||
}
|
||||
});
|
||||
}else if(item.type==3){
|
||||
this.markers.push({
|
||||
id: parseFloat(item.parkingId),
|
||||
latitude: parseFloat(item.latitude),
|
||||
longitude: parseFloat(item.longitude),
|
||||
width: 20,
|
||||
height: 40,
|
||||
iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u9yz0bKCWKyev0JYpTne',
|
||||
callout: {
|
||||
content: item.parkingName, // 修改为你想要显示的文字内容
|
||||
color: '#ffffff', // 修改为文字颜色
|
||||
fontSize: 14, // 修改为文字大小
|
||||
borderRadius: 10, // 修改为气泡圆角大小
|
||||
bgColor: '#FF473E', // 修改为气泡背景颜色
|
||||
padding: 6, // 修改为气泡内边距
|
||||
display: 'ALWAYS' // 修改为气泡的显示策略
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
this.parkingList = res.rows
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error("Error fetching parking data:", error);
|
||||
|
|
@ -490,14 +479,13 @@
|
|||
|
||||
getArea() {
|
||||
// 发送请求获取数据
|
||||
this.$u.get('/app/area/list').then((res) => {
|
||||
let id = this.orderInfo.areaId
|
||||
this.$u.get("/app/area/" + id).then((res) => {
|
||||
if (res.code === 200) {
|
||||
// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
|
||||
const polylines = res.rows
|
||||
.filter(area => area.boundaryStr) // 过滤掉boundary为空的数据
|
||||
.map(area => this.convertBoundaryToPolyline(area.boundaryStr));
|
||||
const polylines = this.convertBoundaryToPolyline(res.data.boundaryStr)
|
||||
// 更新折线数据
|
||||
this.polygons = polylines;
|
||||
this.polygons.push(polylines)
|
||||
this.getParking()
|
||||
// console.log(this.polyline);
|
||||
}
|
||||
|
|
@ -526,6 +514,8 @@
|
|||
if (res.code === 200) {
|
||||
// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
|
||||
this.orderInfo = res.data
|
||||
this.getArea()
|
||||
|
||||
this.loading = true
|
||||
this.latitude = parseFloat(this.orderInfo.latitude)
|
||||
this.longitude = parseFloat(this.orderInfo.longitude)
|
||||
|
|
@ -564,7 +554,6 @@
|
|||
});
|
||||
}
|
||||
}
|
||||
this.getArea()
|
||||
|
||||
// console.log(points,'');
|
||||
// this.polyline[0].points=points
|
||||
|
|
@ -585,6 +574,7 @@
|
|||
.page {
|
||||
padding-bottom: 200rpx;
|
||||
width: 750rpx;
|
||||
|
||||
.tip_box {
|
||||
position: fixed;
|
||||
left: 72rpx;
|
||||
|
|
@ -691,8 +681,27 @@
|
|||
|
||||
|
||||
.map {
|
||||
position: relative;
|
||||
width: 750rpx;
|
||||
height: 752rpx;
|
||||
.park {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
right: 30rpx;
|
||||
bottom: 40rpx;
|
||||
// background-color: #fff;
|
||||
border-radius: 50%;
|
||||
width: 82rpx;
|
||||
height: 82rpx;
|
||||
z-index: 10;
|
||||
|
||||
.img {
|
||||
width: 82rpx;
|
||||
height: 82rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info_card {
|
||||
|
|
@ -771,6 +780,7 @@
|
|||
overflow: hidden;
|
||||
/* 超出部分隐藏 */
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.text {
|
||||
display: inline;
|
||||
// width: 70%;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user