111
This commit is contained in:
parent
6a252b366b
commit
28085e2538
|
|
@ -20,8 +20,8 @@ const install = (Vue, vm) => {
|
|||
// },
|
||||
// });
|
||||
Vue.prototype.$u.http.setConfig({
|
||||
// baseUrl: 'http://192.168.2.8:8080',
|
||||
baseUrl: 'https://dianche.chuantewulian.cn/prod-api',
|
||||
baseUrl: 'http://192.168.2.8:8080',
|
||||
// baseUrl: 'https://dianche.chuantewulian.cn/prod-api',
|
||||
loadingText: '努力加载中~',
|
||||
loadingTime: 800,
|
||||
// 设置自定义头部content-type
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
|
||||
<u-navbar title="地图" :is-back='false' :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||
height='36'></u-navbar>
|
||||
<view class="slider">
|
||||
<view class="tit">
|
||||
电量区间
|
||||
</view>
|
||||
<slider-range :value="rangeValue" :min="rangeMin" :max="rangMax" :step="1" :bar-height="3" :block-size="20"
|
||||
background-color="#EEEEF6" active-color="#4C97E7" :format="format" :decorationVisible="true"
|
||||
@change="handleRangeChange"></slider-range>
|
||||
|
||||
<u-navbar title="地图" :is-back='false' :border-bottom="false" :background="bgc" title-color='#2E4975'
|
||||
title-size='36' height='36'></u-navbar>
|
||||
<view class="slider">
|
||||
<view class="tit">
|
||||
电量区间
|
||||
</view>
|
||||
|
||||
<slider-range :value="rangeValue" :min="rangeMin" :max="rangMax" :step="1" :bar-height="3" :block-size="20"
|
||||
background-color="#EEEEF6" active-color="#4C97E7" :format="format" :decorationVisible="true"
|
||||
@change="handleRangeChange"></slider-range>
|
||||
</view>
|
||||
|
||||
<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
|
||||
:show-location="true" :markers="markers" :polygons="polyline" @markertap="onMarkerTap">
|
||||
:show-location="true" :markers="markers" :polygons="polyline" @markertap="onMarkerTap" >
|
||||
</map>
|
||||
<view class="btn_box">
|
||||
<view class="btn1">
|
||||
|
|
@ -24,70 +24,78 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="decice_cont">
|
||||
<view class="cont">
|
||||
<view class="text">
|
||||
<view class="cont" @click="changeidx(7)">
|
||||
<view class="text" :class="statusidx==7?'act1':''">
|
||||
全部设备
|
||||
</view>
|
||||
<view class="text">
|
||||
1
|
||||
<view class="text" :class="statusidx==7?'act1':''">
|
||||
{{deviceNum.allNum}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont">
|
||||
<view class="text">
|
||||
用户行驶中
|
||||
<!-- <view class="cont" @click="changeidx(0)">
|
||||
<view class="text" :class="statusidx==0?'act1':''">
|
||||
未上架
|
||||
</view>
|
||||
<view class="text">
|
||||
<view class="text" :class="statusidx==0?'act1':''">
|
||||
1
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont" style="width: 140rpx;">
|
||||
<view class="text">
|
||||
用户临时锁定
|
||||
</view>
|
||||
<view class="text">
|
||||
1
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont">
|
||||
<view class="text">
|
||||
已禁用
|
||||
</view>
|
||||
<view class="text">
|
||||
1
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont">
|
||||
<view class="text">
|
||||
已离线
|
||||
</view>
|
||||
<view class="text">
|
||||
1
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont">
|
||||
<view class="text">
|
||||
</view> -->
|
||||
<view class="cont" @click="changeidx(1)">
|
||||
<view class="text" :class="statusidx==1?'act1':''">
|
||||
待租
|
||||
</view>
|
||||
<view class="text">
|
||||
1
|
||||
<view class="text" :class="statusidx==1?'act1':''">
|
||||
{{deviceNum.normalNum}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont">
|
||||
<view class="text">
|
||||
用户预约中
|
||||
<view class="cont" @click="changeidx(2)" style="width: 140rpx;">
|
||||
<view class="text" :class="statusidx==2?'act1':''">
|
||||
预约中
|
||||
</view>
|
||||
<view class="text">
|
||||
1
|
||||
<view class="text" :class="statusidx==2?'act1':''">
|
||||
{{deviceNum.inAppointmentNum}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont">
|
||||
<view class="cont" @click="changeidx(3)">
|
||||
<view class="text" :class="statusidx==3?'act1':''">
|
||||
骑行中
|
||||
</view>
|
||||
<view class="text" :class="statusidx==3?'act1':''">
|
||||
{{deviceNum.ridingNum}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont" @click="changeidx(4)">
|
||||
<view class="text" :class="statusidx==4?'act1':''">
|
||||
临时锁车
|
||||
</view>
|
||||
<view class="text" :class="statusidx==4?'act1':''">
|
||||
{{deviceNum.temporarilyLockNum}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont" @click="changeidx(8)">
|
||||
<view class="text" :class="statusidx==8?'act1':''">
|
||||
下线
|
||||
</view>
|
||||
<view class="text" :class="statusidx==8?'act1':''">
|
||||
{{deviceNum.disabledNum}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont" @click="changeidx(9)">
|
||||
<view class="text" :class="statusidx==9?'act1':''">
|
||||
离线
|
||||
</view>
|
||||
<view class="text" :class="statusidx==9?'act1':''">
|
||||
{{deviceNum.offlineNum}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="cont">
|
||||
<view class="text">
|
||||
调度设备
|
||||
</view>
|
||||
<view class="text">
|
||||
1
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<tab-bar :indexs='1' style=""></tab-bar>
|
||||
</view>
|
||||
|
|
@ -95,6 +103,7 @@
|
|||
|
||||
<script>
|
||||
import SliderRange from '@/pages_admin/components/primewind-sliderrange/index.vue'
|
||||
let timerId;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -114,7 +123,22 @@
|
|||
infonum: {},
|
||||
rangeMin: 0,
|
||||
rangMax: 100,
|
||||
rangeValue: [0, 100]
|
||||
rangeValue: [1, 99],
|
||||
status0: [], //未上架
|
||||
status1: [], //正常
|
||||
status2: [], //预约中
|
||||
status3: [], //骑行中
|
||||
status4: [], //临时锁车
|
||||
status8: [], //下线
|
||||
status9: [], //离线
|
||||
markdata: {
|
||||
|
||||
},
|
||||
statusidx: 7,
|
||||
deviceNum: {},
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -125,10 +149,13 @@
|
|||
|
||||
// 执行其他操作...
|
||||
});
|
||||
|
||||
|
||||
this.getArea()
|
||||
this.getParking()
|
||||
|
||||
this.getmarks()
|
||||
this.getordernum()
|
||||
this.allVehicleNum()
|
||||
},
|
||||
computed: {
|
||||
userId() {
|
||||
|
|
@ -136,11 +163,299 @@
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
allVehicleNum() {
|
||||
let data = {
|
||||
powerStart: this.rangeValue[0],
|
||||
powerEnd: this.rangeValue[1]
|
||||
}
|
||||
this.$u.get('/appVerify/allVehicleNum?', data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
|
||||
this.deviceNum = res.data
|
||||
// console.log(this.polyline);
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error("Error fetching area data:", error);
|
||||
});
|
||||
},
|
||||
changeidx(ids) {
|
||||
this.statusidx = ids
|
||||
this.getmarks()
|
||||
},
|
||||
markstause() {
|
||||
// console.log(this.status9, 'aaaaaaa');
|
||||
this.status0.forEach(item => {
|
||||
this.markers.push({
|
||||
id: parseFloat(item.sn),
|
||||
latitude: parseFloat(item.latitude),
|
||||
longitude: parseFloat(item.longitude),
|
||||
// title: item.deviceName,
|
||||
width: 40,
|
||||
height: 40,
|
||||
iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u76wT0QiWdAGJdF4v6AR',
|
||||
callout: {
|
||||
content: '未上架', // 修改为你想要显示的文字内容
|
||||
color: '#ffffff', // 修改为文字颜色
|
||||
fontSize: 14, // 修改为文字大小
|
||||
borderRadius: 10, // 修改为气泡圆角大小
|
||||
bgColor: '#000000', // 修改为气泡背景颜色
|
||||
padding: 6, // 修改为气泡内边距
|
||||
display: 'ALWAYS', // 修改为气泡的显示策略
|
||||
}
|
||||
})
|
||||
})
|
||||
// https://lxnapi.ccttiot.com/bike/img/static/u1UD93BU1vfshWFoDwgX
|
||||
// https://lxnapi.ccttiot.com/bike/img/static/u4UKmB47AxOj3YKIaajM
|
||||
this.status1.forEach(item => {
|
||||
this.markers.push({
|
||||
id: parseFloat(item.sn),
|
||||
latitude: parseFloat(item.latitude),
|
||||
longitude: parseFloat(item.longitude),
|
||||
// title: item.deviceName,
|
||||
width: 40,
|
||||
height: 40,
|
||||
iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u1UD93BU1vfshWFoDwgX',
|
||||
callout: {
|
||||
content: '待租' + item.remainingPower + '%', // 修改为你想要显示的文字内容
|
||||
color: '#2679D1', // 修改为文字颜色
|
||||
fontSize: 14, // 修改为文字大小
|
||||
borderRadius: 10, // 修改为气泡圆角大小
|
||||
bgColor: '#D4ECFF', // 修改为气泡背景颜色
|
||||
padding: 6, // 修改为气泡内边距
|
||||
display: 'ALWAYS', // 修改为气泡的显示策略
|
||||
}
|
||||
})
|
||||
})
|
||||
this.status2.forEach(item => {
|
||||
this.markers.push({
|
||||
id: parseFloat(item.sn),
|
||||
latitude: parseFloat(item.latitude),
|
||||
longitude: parseFloat(item.longitude),
|
||||
// title: item.deviceName,
|
||||
width: 40,
|
||||
height: 40,
|
||||
iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u1UD93BU1vfshWFoDwgX',
|
||||
callout: {
|
||||
content: '预约' + item.remainingPower + '%', // 修改为你想要显示的文字内容
|
||||
color: '#2679D1', // 修改为文字颜色
|
||||
fontSize: 14, // 修改为文字大小
|
||||
borderRadius: 10, // 修改为气泡圆角大小
|
||||
bgColor: '#D4ECFF', // 修改为气泡背景颜色
|
||||
padding: 6, // 修改为气泡内边距
|
||||
display: 'ALWAYS', // 修改为气泡的显示策略
|
||||
}
|
||||
})
|
||||
})
|
||||
this.status3.forEach(item => {
|
||||
this.markers.push({
|
||||
id: parseFloat(item.sn),
|
||||
latitude: parseFloat(item.latitude),
|
||||
longitude: parseFloat(item.longitude),
|
||||
// title: item.deviceName,
|
||||
width: 40,
|
||||
height: 40,
|
||||
iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u1UD93BU1vfshWFoDwgX',
|
||||
callout: {
|
||||
content: '骑行' + item.remainingPower + '%', // 修改为你想要显示的文字内容
|
||||
color: '#2679D1', // 修改为文字颜色
|
||||
fontSize: 14, // 修改为文字大小
|
||||
borderRadius: 10, // 修改为气泡圆角大小
|
||||
bgColor: '#D4ECFF', // 修改为气泡背景颜色
|
||||
padding: 6, // 修改为气泡内边距
|
||||
display: 'ALWAYS', // 修改为气泡的显示策略
|
||||
}
|
||||
})
|
||||
})
|
||||
this.status4.forEach(item => {
|
||||
this.markers.push({
|
||||
id: parseFloat(item.sn),
|
||||
latitude: parseFloat(item.latitude),
|
||||
longitude: parseFloat(item.longitude),
|
||||
// title: item.deviceName,
|
||||
width: 40,
|
||||
height: 40,
|
||||
iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u1UD93BU1vfshWFoDwgX',
|
||||
callout: {
|
||||
content: '锁车' + item.remainingPower + '%', // 修改为你想要显示的文字内容
|
||||
color: '#2679D1', // 修改为文字颜色
|
||||
fontSize: 14, // 修改为文字大小
|
||||
borderRadius: 10, // 修改为气泡圆角大小
|
||||
bgColor: '#D4ECFF', // 修改为气泡背景颜色
|
||||
padding: 6, // 修改为气泡内边距
|
||||
display: 'ALWAYS', // 修改为气泡的显示策略
|
||||
}
|
||||
})
|
||||
})
|
||||
this.status8.forEach(item => {
|
||||
this.markers.push({
|
||||
id: parseFloat(item.sn),
|
||||
latitude: parseFloat(item.latitude),
|
||||
longitude: parseFloat(item.longitude),
|
||||
// title: item.deviceName,
|
||||
width: 40,
|
||||
height: 40,
|
||||
iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u76wT0QiWdAGJdF4v6AR',
|
||||
callout: {
|
||||
content: '下线', // 修改为你想要显示的文字内容
|
||||
color: '#ffffff', // 修改为文字颜色
|
||||
fontSize: 14, // 修改为文字大小
|
||||
borderRadius: 10, // 修改为气泡圆角大小
|
||||
bgColor: '#000000', // 修改为气泡背景颜色
|
||||
padding: 6, // 修改为气泡内边距
|
||||
display: 'ALWAYS', // 修改为气泡的显示策略
|
||||
}
|
||||
})
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.status9.forEach(item => {
|
||||
this.markers.push({
|
||||
id: parseFloat(item.mac),
|
||||
latitude: parseFloat(item.latitude),
|
||||
longitude: parseFloat(item.longitude),
|
||||
// title: item.deviceName,
|
||||
width: 40,
|
||||
height: 40,
|
||||
iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u4UKmB47AxOj3YKIaajM',
|
||||
callout: {
|
||||
content: '离线', // 修改为你想要显示的文字内容
|
||||
color: '#ffffff', // 修改为文字颜色
|
||||
fontSize: 14, // 修改为文字大小
|
||||
borderRadius: 10, // 修改为气泡圆角大小
|
||||
bgColor: '#000000', // 修改为气泡背景颜色
|
||||
padding: 6, // 修改为气泡内边距
|
||||
display: 'ALWAYS', // 修改为气泡的显示策略
|
||||
}
|
||||
})
|
||||
})
|
||||
}, 200)
|
||||
|
||||
},
|
||||
getmarks() {
|
||||
|
||||
this.markers = []
|
||||
this.status0 = []
|
||||
this.status1 = []
|
||||
this.status2 = []
|
||||
this.status3 = []
|
||||
this.status4 = []
|
||||
this.status8 = []
|
||||
this.status9 = []
|
||||
let data = {
|
||||
powerStart: this.rangeValue[0],
|
||||
powerEnd: this.rangeValue[1],
|
||||
sort: 'desc',
|
||||
|
||||
}
|
||||
if (this.statusidx != 7&&this.statusidx != 9) {
|
||||
data.status = this.statusidx
|
||||
this.$u.get(`/appVerify/allVehicleInfo?`, data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.showmap = true
|
||||
this.listData = res.data;
|
||||
res.data.forEach(item => {
|
||||
if (item.status == 0) {
|
||||
this.status0.push(item);
|
||||
|
||||
} else if (item.status == 1) {
|
||||
this.status1.push(item);
|
||||
} else if (item.status == 2) {
|
||||
this.status2.push(item);
|
||||
} else if (item.status == 3) {
|
||||
this.status3.push(item);
|
||||
} else if (item.status == 4) {
|
||||
this.status4.push(item);
|
||||
} else if (item.status == 8) {
|
||||
this.status8.push(item);
|
||||
}
|
||||
if (item.onlineStatus == 0) {
|
||||
this.status9.push(item);
|
||||
}
|
||||
// 可以在这里执行其他针对每个项的操作
|
||||
});
|
||||
this.markstause()
|
||||
this.getParking()
|
||||
// this.markers = markers;
|
||||
|
||||
} else {
|
||||
// 处理接口返回错误的情况
|
||||
}
|
||||
}).catch(error => {
|
||||
// 处理接口请求失败的情况
|
||||
});
|
||||
}else if(this.statusidx==7){
|
||||
data.status=''
|
||||
this.$u.get(`/appVerify/allVehicleInfo?`, data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.showmap = true
|
||||
this.listData = res.data;
|
||||
res.data.forEach(item => {
|
||||
if (item.status == 0) {
|
||||
this.status0.push(item);
|
||||
|
||||
} else if (item.status == 1) {
|
||||
this.status1.push(item);
|
||||
} else if (item.status == 2) {
|
||||
this.status2.push(item);
|
||||
} else if (item.status == 3) {
|
||||
this.status3.push(item);
|
||||
} else if (item.status == 4) {
|
||||
this.status4.push(item);
|
||||
} else if (item.status == 8) {
|
||||
this.status1.push(item);
|
||||
}
|
||||
if (item.onlineStatus == 0) {
|
||||
this.status9.push(item);
|
||||
}
|
||||
// 可以在这里执行其他针对每个项的操作
|
||||
});
|
||||
this.markstause()
|
||||
this.getParking()
|
||||
// this.markers = markers;
|
||||
|
||||
} else {
|
||||
// 处理接口返回错误的情况
|
||||
}
|
||||
}).catch(error => {
|
||||
// 处理接口请求失败的情况
|
||||
});
|
||||
}else if(this.statusidx==9){
|
||||
data.status=''
|
||||
this.$u.get(`/appVerify/allVehicleInfo?`, data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.showmap = true
|
||||
this.listData = res.data;
|
||||
res.data.forEach(item => {
|
||||
|
||||
if (item.onlineStatus == 0) {
|
||||
this.status9.push(item);
|
||||
}
|
||||
// 可以在这里执行其他针对每个项的操作
|
||||
});
|
||||
this.markstause()
|
||||
this.getParking()
|
||||
// this.markers = markers;
|
||||
|
||||
} else {
|
||||
// 处理接口返回错误的情况
|
||||
}
|
||||
}).catch(error => {
|
||||
// 处理接口请求失败的情况
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
format(val) {
|
||||
return val + '%'
|
||||
},
|
||||
handleRangeChange(e) {
|
||||
this.rangeValue = e
|
||||
// 每次滑动时清除之前的定时器
|
||||
clearTimeout(timerId);
|
||||
// 设置一个新的定时器，在滑动停止后 500ms 执行 getmarks 方法
|
||||
timerId = setTimeout(() => {
|
||||
this.rangeValue = e;
|
||||
this.getmarks();
|
||||
}, 500);
|
||||
},
|
||||
onMarkerTap(e) {
|
||||
if (e.type === 'markertap') {
|
||||
|
|
@ -171,60 +486,9 @@
|
|||
}
|
||||
}
|
||||
|
||||
console.log("no");
|
||||
|
||||
},
|
||||
getmarks() {
|
||||
this.$u.get(`/appVerify/adminOrder/list?adminId=` + 2).then((res) => {
|
||||
if (res.code == 200) {
|
||||
console.log('调用了');
|
||||
this.listData = res.rows;
|
||||
res.rows.forEach(item => {
|
||||
if (item.type == 1) {
|
||||
this.fixdata.push(item);
|
||||
console.log(this.fixdata, 'this.fixdata');
|
||||
} else if (item.type == 2) {
|
||||
this.eledata.push(item);
|
||||
}
|
||||
// 可以在这里执行其他针对每个项的操作
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.fixdata.forEach(item => {
|
||||
this.markers.push({
|
||||
id: parseFloat(item.sn),
|
||||
latitude: parseFloat(item.latitude),
|
||||
longitude: parseFloat(item.longitude),
|
||||
// title: item.deviceName,
|
||||
width: 40,
|
||||
height: 40,
|
||||
iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u1UD93BU1vfshWFoDwgX',
|
||||
})
|
||||
})
|
||||
}, 100)
|
||||
|
||||
setTimeout(() => {
|
||||
this.eledata.forEach(item => {
|
||||
this.markers.push({
|
||||
id: parseFloat(item.sn),
|
||||
latitude: parseFloat(item.latitude),
|
||||
longitude: parseFloat(item.longitude),
|
||||
// title: item.deviceName,
|
||||
width: 40,
|
||||
height: 40,
|
||||
iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u4UKmB47AxOj3YKIaajM',
|
||||
})
|
||||
})
|
||||
console.log(this.markers, ' this.markers this.markers');
|
||||
}, 200)
|
||||
|
||||
// this.markers = markers;
|
||||
|
||||
} else {
|
||||
// 处理接口返回错误的情况
|
||||
}
|
||||
}).catch(error => {
|
||||
// 处理接口请求失败的情况
|
||||
});
|
||||
},
|
||||
topage() {
|
||||
uni.navigateTo({
|
||||
url: '/page_fix/repair/repair_index'
|
||||
|
|
@ -296,7 +560,27 @@
|
|||
|
||||
// 将处理后的数据添加到 this.polyline 中
|
||||
this.polyline = this.polyline.concat(polylines);
|
||||
console.log(this.polyline);
|
||||
// console.log(this.polyline);
|
||||
res.rows.forEach(item => {
|
||||
this.markers.push({
|
||||
id: parseFloat(item.parkingId),
|
||||
latitude: parseFloat(item.latitude),
|
||||
longitude: parseFloat(item.longitude),
|
||||
// title: item.deviceName,
|
||||
width: 20,
|
||||
height: 40,
|
||||
iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u9yz0bKCWKyev0JYpTne',
|
||||
callout: {
|
||||
content: item.parkingName, // 修改为你想要显示的文字内容
|
||||
color: '#ffffff', // 修改为文字颜色
|
||||
fontSize: 14, // 修改为文字大小
|
||||
borderRadius: 10, // 修改为气泡圆角大小
|
||||
bgColor: '#000000', // 修改为气泡背景颜色
|
||||
padding: 6, // 修改为气泡内边距
|
||||
display: 'ALWAYS', // 修改为气泡的显示策略
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error("Error fetching parking data:", error);
|
||||
|
|
@ -331,20 +615,24 @@
|
|||
|
||||
.page {
|
||||
width: 750rpx;
|
||||
.decice_cont{
|
||||
|
||||
.decice_cont {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding: 22rpx 28rpx;
|
||||
|
||||
.cont:nth-child(5n) {
|
||||
margin-right: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.cont{
|
||||
|
||||
.cont {
|
||||
margin-top: 18rpx;
|
||||
margin-right: 10rpx;
|
||||
// display: flex;
|
||||
width: 130rpx;
|
||||
.text{
|
||||
|
||||
.text {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
|
|
@ -352,16 +640,21 @@
|
|||
line-height: 38rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
|
||||
.act1 {
|
||||
color: #4C97E7;
|
||||
}
|
||||
}
|
||||
.act1{
|
||||
color: #4C97E7;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.btn_box{
|
||||
|
||||
.btn_box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
.btn1{
|
||||
|
||||
.btn1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -372,7 +665,8 @@
|
|||
font-size: 40rpx;
|
||||
color: #4C97E7;
|
||||
}
|
||||
.btn2{
|
||||
|
||||
.btn2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -384,18 +678,21 @@
|
|||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.slider{
|
||||
.tit{
|
||||
|
||||
.slider {
|
||||
.tit {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
|
||||
width: 752rpx;
|
||||
height: 150rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0,0,0,0.07);
|
||||
box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.07);
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
}
|
||||
|
||||
.map {
|
||||
width: 750rpx;
|
||||
height: 906rpx;
|
||||
|
|
|
|||
|
|
@ -44,6 +44,261 @@
|
|||
</view>
|
||||
</view>
|
||||
<u-mask :show="show" @click="show = false" :z-index='100' />
|
||||
|
||||
<u-picker mode="time" v-model="time1" :params="params" @confirm="confirm1" :default-time='pickertime'></u-picker>
|
||||
<u-picker mode="time" v-model="time2" :params="params" @confirm="confirm2" :default-time='pickertime'></u-picker>
|
||||
<view class="warp_box">
|
||||
<swiper class="swiper" :style="{ height: swiperHeight + 'rpx' }" :current='curtitidx' @change="swiperchange" next-margin='-20rpx'>
|
||||
<swiper-item>
|
||||
<view class="swiper-item ">
|
||||
<view class="card" v-for="(item,index) in allList" :key="index">
|
||||
<view class="line"></view>
|
||||
<view class="top_info">
|
||||
<view class="top_info_left">
|
||||
订单编号：{{item.orderNo}}
|
||||
</view>
|
||||
<view class="top_info_right" v-if="item.status==0||item.status==2">
|
||||
<view class="yuan"></view>
|
||||
进行中
|
||||
</view>
|
||||
<view class="top_info_right" v-if="item.status==1||item.status==3" style="color: orangered;">
|
||||
<view class="yuan" style="background: orangered;"></view>
|
||||
待支付
|
||||
</view>
|
||||
<view class="top_info_right" v-if="item.status==4" style="color: green;">
|
||||
<view class="yuan" style="background: green;"></view>
|
||||
已完成
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="lines"></view>
|
||||
<view class="order_info">
|
||||
<view class="info_li">
|
||||
租赁用户：{{item.phonenumber}}
|
||||
</view>
|
||||
<view class="info_li">
|
||||
<view class="half_info_li">
|
||||
车辆编号：{{item.sn}}
|
||||
</view>
|
||||
<view class="half_info_li">
|
||||
租赁时长：{{item.duration/60}}分钟
|
||||
</view>
|
||||
</view>
|
||||
<view class="info_li">
|
||||
订单费用：{{item.totalFee}}元
|
||||
</view>
|
||||
<view class="info_li" v-if="item.unlock_time">
|
||||
开关时间：{{item.unlock_time}} {{ item.return_time ? item.return_time : '--' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="lines"></view>
|
||||
<view class="btn_box">
|
||||
<view class="btn" v-if="item.status==0||item.status==2" @click="showfzs(item)">
|
||||
辅助还车
|
||||
</view>
|
||||
<view class="btn" v-if="item.status==1||item.status==3" @click="showgjs()">
|
||||
改价
|
||||
</view>
|
||||
<view class="btn_line" v-if="item.status!=4">
|
||||
|
||||
</view>
|
||||
<view class="btn" v-if="item.status==4" style="width: 100%;">
|
||||
查看详情
|
||||
</view>
|
||||
<view class="btn" v-if="item.status!=4&&item.status!=2" >
|
||||
查看详情
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item ">
|
||||
<view class="card" v-for="(item,index) in ingList" :key="index">
|
||||
<view class="line"></view>
|
||||
<view class="top_info">
|
||||
<view class="top_info_left">
|
||||
订单编号：{{item.orderNo}}
|
||||
</view>
|
||||
<view class="top_info_right" v-if="item.status==0||item.status==2">
|
||||
<view class="yuan"></view>
|
||||
进行中
|
||||
</view>
|
||||
<view class="top_info_right" v-if="item.status==1||item.status==3" style="color: orangered;">
|
||||
<view class="yuan" style="background: orangered;"></view>
|
||||
待支付
|
||||
</view>
|
||||
<view class="top_info_right" v-if="item.status==4" style="color: green;">
|
||||
<view class="yuan" style="background: green;"></view>
|
||||
已完成
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="lines"></view>
|
||||
<view class="order_info">
|
||||
<view class="info_li">
|
||||
租赁用户：{{item.phonenumber}}
|
||||
</view>
|
||||
<view class="info_li">
|
||||
<view class="half_info_li">
|
||||
车辆编号：{{item.sn}}
|
||||
</view>
|
||||
<view class="half_info_li">
|
||||
租赁时长：{{item.duration/60}}分钟
|
||||
</view>
|
||||
</view>
|
||||
<view class="info_li">
|
||||
订单费用：{{item.totalFee}}元
|
||||
</view>
|
||||
<view class="info_li" v-if="item.unlock_time">
|
||||
开关时间：{{item.unlock_time}} {{ item.return_time ? item.return_time : '--' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="lines"></view>
|
||||
<view class="btn_box">
|
||||
<view class="btn" v-if="item.status==0||item.status==2" @click="showfzs(item)">
|
||||
辅助还车
|
||||
</view>
|
||||
<view class="btn" v-if="item.status==1||item.status==3" @click="showgjs()">
|
||||
改价
|
||||
</view>
|
||||
<view class="btn_line" v-if="item.status!=4">
|
||||
|
||||
</view>
|
||||
<view class="btn" v-if="item.status==4" style="width: 100%;">
|
||||
查看详情
|
||||
</view>
|
||||
<view class="btn" v-if="item.status!=4" >
|
||||
查看详情
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item ">
|
||||
<view class="card" @click="todetail(item.id)" v-for="(item,index) in reprement" :key="index">
|
||||
<view class="line"></view>
|
||||
<view class="top_info">
|
||||
<view class="top_info_left">
|
||||
订单编号：{{item.orderNo}}
|
||||
</view>
|
||||
<view class="top_info_right" v-if="item.status==0||item.status==2">
|
||||
<view class="yuan"></view>
|
||||
进行中
|
||||
</view>
|
||||
<view class="top_info_right" v-if="item.status==1||item.status==3" style="color: orangered;">
|
||||
<view class="yuan" style="background: orangered;"></view>
|
||||
待支付
|
||||
</view>
|
||||
<view class="top_info_right" v-if="item.status==4" style="color: green;">
|
||||
<view class="yuan" style="background: green;"></view>
|
||||
已完成
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="lines"></view>
|
||||
<view class="order_info">
|
||||
<view class="info_li">
|
||||
租赁用户：{{item.phonenumber}}
|
||||
</view>
|
||||
<view class="info_li">
|
||||
<view class="half_info_li">
|
||||
车辆编号：{{item.sn}}
|
||||
</view>
|
||||
<view class="half_info_li">
|
||||
租赁时长：{{item.duration/60}}分钟
|
||||
</view>
|
||||
</view>
|
||||
<view class="info_li">
|
||||
订单费用：{{item.totalFee}}元
|
||||
</view>
|
||||
<view class="info_li" v-if="item.unlock_time">
|
||||
开关时间：{{item.unlock_time}} {{ item.return_time ? item.return_time : '--' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="lines"></view>
|
||||
<view class="btn_box">
|
||||
<view class="btn" v-if="item.status==0||item.status==2" @click="showfzs(item)">
|
||||
辅助还车
|
||||
</view>
|
||||
<view class="btn" v-if="item.status==1||item.status==3" @click="showgjs()">
|
||||
改价
|
||||
</view>
|
||||
<view class="btn_line" v-if="item.status!=4">
|
||||
|
||||
</view>
|
||||
<view class="btn" v-if="item.status==4" style="width: 100%;">
|
||||
查看详情
|
||||
</view>
|
||||
<view class="btn" v-if="item.status!=4" >
|
||||
查看详情
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item ">
|
||||
|
||||
<view class="card" v-for="(item,index) in alreadyList" :key="index">
|
||||
<view class="line"></view>
|
||||
<view class="top_info">
|
||||
<view class="top_info_left">
|
||||
订单编号：{{item.orderNo}}
|
||||
</view>
|
||||
<view class="top_info_right" v-if="item.status==0||item.status==2">
|
||||
<view class="yuan"></view>
|
||||
进行中
|
||||
</view>
|
||||
<view class="top_info_right" v-if="item.status==1||item.status==3" style="color: orangered;">
|
||||
<view class="yuan" style="background: orangered;"></view>
|
||||
待支付
|
||||
</view>
|
||||
<view class="top_info_right" v-if="item.status==4" style="color: green;">
|
||||
<view class="yuan" style="background: green;"></view>
|
||||
已完成
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="lines"></view>
|
||||
<view class="order_info">
|
||||
<view class="info_li">
|
||||
租赁用户：{{item.phonenumber}}
|
||||
</view>
|
||||
<view class="info_li">
|
||||
<view class="half_info_li">
|
||||
车辆编号：{{item.sn}}
|
||||
</view>
|
||||
<view class="half_info_li">
|
||||
租赁时长：{{item.duration/60}}分钟
|
||||
</view>
|
||||
</view>
|
||||
<view class="info_li">
|
||||
订单费用：{{item.totalFee}}元
|
||||
</view>
|
||||
<view class="info_li" v-if="item.unlock_time">
|
||||
开关时间：{{item.unlock_time}} {{ item.return_time ? item.return_time : '--' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="lines"></view>
|
||||
<view class="btn_box">
|
||||
<view class="btn" v-if="item.status==0||item.status==2" @click="showfzs(item)">
|
||||
辅助还车
|
||||
</view>
|
||||
<view class="btn_line">
|
||||
|
||||
</view>
|
||||
<view class="btn">
|
||||
查看详情
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
|
||||
</swiper>
|
||||
</view>
|
||||
<view class="tip_box" v-if="showfz">
|
||||
<view class="top">
|
||||
<view class="tip">
|
||||
|
|
@ -55,10 +310,10 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="bot">
|
||||
<view class="bot_left" @click="show=false">
|
||||
<view class="bot_left" @click="closefz()">
|
||||
取消
|
||||
</view>
|
||||
<view class="bot_right">
|
||||
<view class="bot_right" @click="backDevice()">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -99,7 +354,7 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="bot">
|
||||
<view class="bot_left" @click="show=false">
|
||||
<view class="bot_left" @click="closefz()">
|
||||
取消
|
||||
</view>
|
||||
<view class="bot_right">
|
||||
|
|
@ -179,83 +434,6 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-picker mode="time" v-model="time1" :params="params" @confirm="confirm1" :default-time='pickertime'></u-picker>
|
||||
<u-picker mode="time" v-model="time2" :params="params" @confirm="confirm2" :default-time='pickertime'></u-picker>
|
||||
<view class="warp_box">
|
||||
<swiper class="swiper" :style="{ height: swiperHeight + 'rpx' }" :current='curtitidx' @change="swiperchange" next-margin='-20rpx'>
|
||||
<swiper-item>
|
||||
<view class="swiper-item ">
|
||||
<view class="card" @click="todetail(item.id)" v-for="imte in 3" :key="imte">
|
||||
<view class="line"></view>
|
||||
<view class="top_info">
|
||||
<view class="top_info_left">
|
||||
订单编号：12635412134568461
|
||||
</view>
|
||||
<view class="top_info_right">
|
||||
<view class="yuan"></view>
|
||||
进行中
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="lines"></view>
|
||||
<view class="order_info">
|
||||
<view class="info_li">
|
||||
租赁用户：15863007894
|
||||
</view>
|
||||
<view class="info_li">
|
||||
<view class="half_info_li">
|
||||
车辆编号：122323
|
||||
</view>
|
||||
<view class="half_info_li">
|
||||
租赁时长：6分钟
|
||||
</view>
|
||||
</view>
|
||||
<view class="info_li">
|
||||
订单费用：6.00元
|
||||
</view>
|
||||
<view class="info_li">
|
||||
开关时间：2024.02.13 14:24:03-2024.02.13 14:30:03
|
||||
</view>
|
||||
</view>
|
||||
<view class="lines"></view>
|
||||
<view class="btn_box">
|
||||
<view class="btn">
|
||||
辅助还车
|
||||
</view>
|
||||
<view class="btn_line">
|
||||
|
||||
</view>
|
||||
<view class="btn">
|
||||
查看详情
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item ">
|
||||
<view class="card" v-for="(item,index) in eledata" :key="index" v-if="item.status!=1" @click="todetail(item.id)">
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item ">
|
||||
<view class="card" v-for="(item,index) in fixdata" :key="index" v-if="item.status!=1" @click="todetail(item.id)">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item ">
|
||||
<view class="card" v-for="(item,index ) in alreadyList" :key="index" @click="todetail(item.id)">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<tab-bar :indexs='2' style=""></tab-bar>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -283,14 +461,16 @@
|
|||
searchKeyword:'',
|
||||
curtitidx:0,
|
||||
swiperHeight:414*3,
|
||||
fixdata: [],
|
||||
eledata: [],
|
||||
listData: [],
|
||||
allList:[],
|
||||
ingList:[],
|
||||
reprement:[],
|
||||
alreadyList:[],
|
||||
show:true,
|
||||
show:false,
|
||||
showfz:false,
|
||||
showgj:false,
|
||||
showtk:true
|
||||
showtk:false,
|
||||
orderInfo:{}
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
|
@ -299,18 +479,23 @@
|
|||
|
||||
// 执行其他操作...
|
||||
});
|
||||
|
||||
this.orderList()
|
||||
this.orderList1()
|
||||
this.orderList2()
|
||||
this.orderList3()
|
||||
},
|
||||
watch: {
|
||||
curtitidx(newValue, oldValue) {
|
||||
// 处理userId变化的逻辑
|
||||
console.log('userId 发生变化', newValue, oldValue);
|
||||
if(newValue==0){
|
||||
this.swiperHeight=(this.listData.length*440)
|
||||
this.swiperHeight=(this.allList.length*440)
|
||||
}else if(newValue==1){
|
||||
this.swiperHeight=this.eledata.length*440
|
||||
}else if(newValue==1){
|
||||
this.swiperHeight=this.fixdata.length*440
|
||||
this.swiperHeight=this.ingList.length*440
|
||||
}else if(newValue==2){
|
||||
this.swiperHeight=this.reprement.length*440
|
||||
}else if(newValue==3){
|
||||
this.swiperHeight=this.alreadyList.length*440
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -320,8 +505,129 @@
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
backDevice(){
|
||||
this.$u.post('/appVerify/device/return?orderNo='+this.orderInfo.orderNo+'&returnType=2').then((res) => {
|
||||
if (res.code === 200) {
|
||||
// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
|
||||
this.show=false
|
||||
this.showfz=false
|
||||
this.orderInfo={}
|
||||
if(this.curtitidx==0){
|
||||
this.orderList()
|
||||
}else if(this.curtitidx==1){
|
||||
this.orderList1()
|
||||
}
|
||||
}else{
|
||||
uni.showToast({
|
||||
title:res.msg,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error("Error fetching area data:", error);
|
||||
});
|
||||
},
|
||||
closefz(){
|
||||
this.show=false
|
||||
this.showfz=false
|
||||
this.orderInfo={}
|
||||
},
|
||||
showfzs(item){
|
||||
this.orderInfo=item
|
||||
this.show=true
|
||||
this.showfz=true
|
||||
},
|
||||
orderList() {
|
||||
let data ={
|
||||
phonenumber:this.searchKeyword,
|
||||
type:'1',
|
||||
status:'',
|
||||
beginTime:'',
|
||||
endTime:'',
|
||||
|
||||
}
|
||||
|
||||
|
||||
this.$u.get('/appVerify/order/list?',data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
|
||||
this.allList = res.rows
|
||||
this.swiperHeight=(this.allList.length*440)
|
||||
// console.log(this.polyline);
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error("Error fetching area data:", error);
|
||||
});
|
||||
},
|
||||
orderList1() {
|
||||
let data ={
|
||||
phonenumber:this.searchKeyword,
|
||||
type:'1',
|
||||
statusList:'0,2',
|
||||
beginTime:'',
|
||||
endTime:'',
|
||||
|
||||
}
|
||||
this.$u.get('/appVerify/order/list?',data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
|
||||
this.ingList = res.rows
|
||||
// console.log(this.polyline);
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error("Error fetching area data:", error);
|
||||
});
|
||||
},
|
||||
orderList2() {
|
||||
let data ={
|
||||
phonenumber:this.searchKeyword,
|
||||
type:'1',
|
||||
statusList:'1,3',
|
||||
beginTime:'',
|
||||
endTime:'',
|
||||
|
||||
}
|
||||
this.$u.get('/appVerify/order/list?',data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
|
||||
this.reprement = res.rows
|
||||
// console.log(this.polyline);
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error("Error fetching area data:", error);
|
||||
});
|
||||
},
|
||||
orderList3() {
|
||||
let data ={
|
||||
phonenumber:this.searchKeyword,
|
||||
type:'1',
|
||||
status:'4',
|
||||
beginTime:'',
|
||||
endTime:'',
|
||||
|
||||
}
|
||||
this.$u.get('/appVerify/order/list?',data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
|
||||
this.alreadyList = res.rows
|
||||
console.log(this.alreadyList);
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error("Error fetching area data:", error);
|
||||
});
|
||||
},
|
||||
changeidx(idx){
|
||||
this.curtitidx=idx
|
||||
if(idx==0){
|
||||
// this.orderList()
|
||||
}else if(idx==1){
|
||||
// this.orderList1()
|
||||
}else if(idx==2){
|
||||
// this.orderList2()
|
||||
}else if(idx==3){
|
||||
// this.orderList3()
|
||||
}
|
||||
},
|
||||
swiperchange(e){
|
||||
this.curtitidx=e.detail.current
|
||||
|
|
@ -519,10 +825,14 @@
|
|||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
.top_info_left{
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #3D3D3D;
|
||||
.top_info_left {
|
||||
width: 70%;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #3D3D3D;
|
||||
white-space: nowrap; /* 禁止换行 */
|
||||
overflow: hidden; /* 超出部分隐藏 */
|
||||
text-overflow: ellipsis; /* 显示省略号 */
|
||||
}
|
||||
.top_info_right{
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
|
||||
</template>
|
||||
<view class="bot_box">
|
||||
<view class="step1" v-if="false">
|
||||
<view class="step1" v-if="stepindex ==1">
|
||||
<view class="step1_left">
|
||||
设备总数：<span>10</span>
|
||||
</view>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user