You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
391 lines
9.3 KiB
391 lines
9.3 KiB
<template>
|
|
<view id="warp">
|
|
<view class="tab_search">
|
|
<uni-search-bar
|
|
style="width: 100%;"
|
|
bgColor="white"
|
|
placeholder="搜索车辆编号或车牌号"
|
|
v-model="serchValue"
|
|
@input="onSearch"
|
|
clearButton="none"
|
|
></uni-search-bar>
|
|
</view>
|
|
<swiper-tabs
|
|
:height="200"
|
|
:tabIndex="tabIndex"
|
|
:topNavList="topNavList"
|
|
@onSwiperChange="onSwiperChange"
|
|
@onTopTabs="onTopTabs"
|
|
>
|
|
<block
|
|
v-for="(val,i) in topNavList"
|
|
:key="i"
|
|
>
|
|
<scroll-view
|
|
:slot="i"
|
|
style="width: 100%;height: 100%;"
|
|
scroll-y
|
|
scroll-top="0"
|
|
refresher-enabled
|
|
scroll-anchoring
|
|
:refresher-triggered="isHideLoading"
|
|
@scrolltolower='upLoading'
|
|
@refresherrefresh='downLoading'
|
|
>
|
|
<view
|
|
class="list_item"
|
|
v-for="(item,index) in carList"
|
|
:key="index"
|
|
@tap="selectCar(item)"
|
|
>
|
|
<view class="list_item_top">
|
|
<view class="list_item_lef">
|
|
<image src="/static/images/index/car_info_icon.png"></image>
|
|
<view class="lef_r_plate">
|
|
<block v-if="item.status == -1">
|
|
<!-- 停用 -->
|
|
<view class="l_r_p_top1"></view>
|
|
</block>
|
|
<block v-else>
|
|
<block v-if="item.vehicleTaskStatus == 1">
|
|
<!-- 任务中 -->
|
|
<view class="l_r_p_top2"></view>
|
|
</block>
|
|
<block v-if="item.vehicleTaskStatus == 2">
|
|
<!-- 空闲 -->
|
|
<!-- <text></text> -->
|
|
</block>
|
|
</block>
|
|
</view>
|
|
{{item.vehicleCode || ''}}
|
|
<text class="lef_r_rig">( {{item.vehiclePlate}} )</text>
|
|
</view>
|
|
<view class="list_item_right">
|
|
<text v-if='item.gpsState == 1' style="color:#1AAD19">行驶: {{ item.speed }}km/h</text>
|
|
<text v-else-if='item.gpsState == 2' style="color:#1B64F8">静止: {{ item.durationTime }}</text>
|
|
<text v-else='item.gpsState == 0' style="color:#918f8f">离线: {{ item.offlineTime }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="list_item_bot">
|
|
<view class="list_item_bot_bot">
|
|
<view class="list_item_bot_bot_left">车组人员:</view>
|
|
<view class="list_item_bot_bot_rig">{{item.contactPerson?item.contactPerson:'暂无'}}</view>
|
|
</view>
|
|
<view class="list_item_bot_bot">
|
|
<view class="list_item_bot_bot_left">当前位置:</view>
|
|
<view class="list_item_bot_bot_rig">{{item.address?item.address:'暂无'}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bottomTitle" v-if="showNone && carList.length > 5">
|
|
<text>没有更多数据了 ~</text>
|
|
</view>
|
|
<view v-if="showNoCar" class="blank">
|
|
<image src="/static/images/common/none.png"></image>
|
|
<text>{{noText}}</text>
|
|
</view>
|
|
</scroll-view>
|
|
</block>
|
|
</swiper-tabs>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {SwiperTabs} from '@/components/swiper-tabs/swiper-tabs.vue';
|
|
const {urlList,https} = require('@/static/api');
|
|
export default {
|
|
components:{
|
|
SwiperTabs
|
|
},
|
|
data() {
|
|
return {
|
|
tabIndex:3, //当前导航栏索引
|
|
status:-1,
|
|
topNavList:[
|
|
{ title: '离线(0)',},
|
|
{ title: '静止(0)',},
|
|
{ title: '行驶(0)',},
|
|
{ title: '全部(0)',},
|
|
],
|
|
carList:[],
|
|
showNone:false,
|
|
showNoCar:false,
|
|
isLoading:false, //是否在加载中
|
|
isHideLoading:false, //下拉刷新状态
|
|
page:1,
|
|
pageSize:10,
|
|
serchValue:'', //搜索值
|
|
noText:'暂无车辆 ~~ ',
|
|
};
|
|
},
|
|
onLoad() {
|
|
uni.showLoading({
|
|
title:'加载中'
|
|
});
|
|
this.page = 1;
|
|
this.getCarList(-1,1,'');
|
|
},
|
|
onShow() {},
|
|
methods:{
|
|
// 搜索
|
|
onSearch(e){
|
|
console.log('改变了',e)
|
|
if(!this.isLoading){
|
|
this.isLoading = true;
|
|
this.page=1;
|
|
this.carList = [];
|
|
this.getCarList(this.status,1,e);
|
|
}
|
|
},
|
|
// 上拉加载
|
|
upLoading(){
|
|
if(!this.isLoading){
|
|
this.isLoading = true;
|
|
this.page+=1;
|
|
this.getCarList(this.status,this.page,this.serchValue);
|
|
}
|
|
},
|
|
// 下拉刷新
|
|
downLoading(){
|
|
this.page = 1;
|
|
this.isHideLoading = true;
|
|
this.carList = [];
|
|
this.isLoading = true;
|
|
this.showNoCar = false;
|
|
this.showNone = false;
|
|
this.getCarList(this.status,1,this.serchValue);
|
|
},
|
|
onSwiperChange(idx){
|
|
const that = this;
|
|
that.tabIndex = idx;
|
|
switch (idx){
|
|
case 0:
|
|
that.status = 0;
|
|
break;
|
|
case 1:
|
|
that.status = 2;
|
|
break;
|
|
case 2:
|
|
that.status = 1;
|
|
break;
|
|
case 3:
|
|
that.status = -1;
|
|
break;
|
|
};
|
|
that.carList = [];
|
|
that.page = 1;
|
|
that.showNoCar = false;
|
|
that.showNone = false;
|
|
that.getCarList(that.status,1,this.serchValue);
|
|
},
|
|
onTopTabs(index){
|
|
this.tabIndex = index;
|
|
},
|
|
selectCar(item){
|
|
console.log(item)
|
|
var pages = getCurrentPages();// 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
|
|
// var currPage = pages[pages.length - 1]; //当前页面
|
|
var prevPage = pages[pages.length - 2]; //上一个页面
|
|
//prevPage.route获取上一页面的页面路径
|
|
prevPage.$vm._data.selectCarId = item.id;//小程序中的修改方法
|
|
prevPage.$vm._data.defauleMap = {
|
|
latitude:item.latitude,
|
|
longitude:item.longitude,
|
|
},
|
|
uni.navigateBack()//返回上一页面
|
|
},
|
|
getCarList(status,page,key){
|
|
if(key){
|
|
this.noText = '抱歉，暂无匹配车辆'
|
|
}else{
|
|
this.noText = '暂无车辆 ~~ '
|
|
};
|
|
uni.showNavigationBarLoading();
|
|
const _that = this;
|
|
https(urlList.getCarTab+'?key='+key+'¤tPage='+page+'&pageSize='+_that.pageSize+'&status='+status,'GET','','').then(data => {
|
|
console.log('车辆列表',data)
|
|
let info = data.data;
|
|
_that.topNavList = [
|
|
{title: `离线(${info.offlineCount})`},
|
|
{title: `静止(${info.stillCount})`},
|
|
{title: `行驶(${info.drivingCount})`},
|
|
{title: `全部(${info.allCount})`},
|
|
];
|
|
const list = info.vehicleGpsOutput;
|
|
if(list.length !== 0){
|
|
if(page == 1){
|
|
_that.carList = list;
|
|
}else{
|
|
_that.carList = _that.carList.concat(list);
|
|
}
|
|
_that.showNoCar = false;
|
|
}else{
|
|
if(_that.page > 1){
|
|
_that.page-=1;
|
|
_that.showNone = true;
|
|
}else{
|
|
_that.showNoCar = true;
|
|
}
|
|
};
|
|
_that.isLoading = false;
|
|
_that.isHideLoading = false;
|
|
uni.hideNavigationBarLoading();
|
|
setTimeout(()=>{
|
|
uni.hideLoading();
|
|
},500)
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title:err,
|
|
icon:'none',
|
|
duration:1500
|
|
})
|
|
_that.isLoading = false;
|
|
_that.isHideLoading = false;
|
|
if(_that.page > 1){
|
|
_that.page-=1;
|
|
}
|
|
uni.hideNavigationBarLoading();
|
|
setTimeout(()=>{
|
|
uni.hideLoading();
|
|
},500)
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #F3F4F6;
|
|
}
|
|
/deep/::-webkit-scrollbar {
|
|
display: none;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
#warp{
|
|
width: 100%;
|
|
.tab_search{
|
|
height: 90rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background-color: #3476FE;
|
|
}
|
|
.list_item{
|
|
width: 100%;
|
|
height: 250rpx;
|
|
background-color: white;
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.list_item_top{
|
|
height: 80rpx;
|
|
width: 686rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 14px;
|
|
}
|
|
.list_item_right{
|
|
display: flex;
|
|
flex-direction: row;
|
|
color: #1AAD19;
|
|
}
|
|
.list_item_lef{
|
|
font-weight: bold;
|
|
color: #353535;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: baseline;
|
|
.lef_r_plate{
|
|
height:27rpx;
|
|
width: 25rpx;
|
|
// border: 1rpx solid red;
|
|
// display: flex;
|
|
// // flex-direction: row;
|
|
// align-items:flex-start;
|
|
// justify-content:flex-start;
|
|
.l_r_p_top1{
|
|
height: 100%;
|
|
width:15rpx;
|
|
border-top:6rpx solid red;
|
|
}
|
|
.l_r_p_top2{
|
|
height:10rpx;
|
|
width:10rpx;
|
|
background-color: red;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
image{
|
|
width: 35rpx;
|
|
height: 27rpx;
|
|
}
|
|
.lef_r_rig{
|
|
font-weight: 500;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
.list_item_bot{
|
|
width: 686rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-top: 1rpx solid rgb(231, 230, 230);
|
|
font-size:14px;
|
|
.list_item_bot_bot{
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-top: 15rpx;
|
|
|
|
}
|
|
.list_item_bot_bot_left{
|
|
width: 135rpx;
|
|
font-weight: bold;
|
|
color:#555555;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
}
|
|
.list_item_bot_bot_rig{
|
|
color: #707070;
|
|
width: calc(100% - 175rpx);
|
|
text-overflow: -o-ellipsis-lastline;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
}
|
|
}
|
|
.bottomTitle{
|
|
width: 100%;
|
|
height: 70rpx;
|
|
color: #666666;
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.blank{
|
|
font-size: 24rpx;
|
|
color: #999999FF;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.blank image{
|
|
width: 300rpx;
|
|
height: 240rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
}
|
|
</style>
|