qujiancesu/pages/pages/history.vue

<template>
	<!-- 日期弹窗 -->
	<dateSelection ref="Selectiondate" v-model="showdate" @change="change"></dateSelection>


	<view class="tabs">
		<view class="left" @click="showdate=true">
			<view class="time" >{{queryDate || '选择日期'}}</view>
			<image src="/static/time.png"></image>
		</view>
		<view class="right">
			<input placeholder="搜索超速车辆" v-model="vehicleNumber" @confirm='confirm(e)' />
			<uni-icons type="search" size="16rpx"></uni-icons>
		</view>
		<view class="reset" @click="emptydata">重置</view>
	</view>
	<scroll-view :scroll-y="true" :scroll-top="scroll" class="scroll-view" @scrolltolower='bottomingOut'>
		<view v-for="item in list" class="item" @click="openinfo(item.encoding)">
			<view class="left">
				<view class="t">
					<!-- <image src="/static/err.png"></image> -->
					车牌号码
				</view>
				<view class="num" :class="`numcolor${item.vehicleNumberColor}`">{{item.vehicleNumber}}</view>
			</view>
			<view class="center">
				<view class="thead">
					<view>平均车速</view>
					<view>超速比例</view>
					<view>实际行驶时长</view>
					<view>待休息时长</view>
				</view>
				<view class="tbody">
					<view>{{item.averageSpeedText}}</view>
					<view>{{item.overspeedLevelInformation}}</view>
					<view>{{item.exerciseDurationText}}</view>
					<view>{{item.restDurationText}}</view>
				</view>
			</view>
			
			<view class="right " :class="{red:item.status==2}">{{item.statusText}}</view>
		</view>
		<view style="height: 10rpx;"></view>
		<nynull txt="暂无历史数据" v-if="!list.length"></nynull>
	</scroll-view>
	<pageanimation v-model="showdetails" @close="refdetails.hide()" >
		<pagedetails ref="refdetails"  />
	</pageanimation>
</template>

<script setup>
	import pagedetails from "./details.vue";
	import {
		ref
	} from 'vue';
	import {
		gethistory
	} from "/appapi/index.js"
	const showdate=ref(false)
	const queryDate=ref("")
	const Selectiondate=ref()
	const vehicleNumber=ref("")
	const refdetails=ref()
	const showdetails=ref(false)
	const list=ref([])
	// 分页相关
	const pageSize=ref(40);
	const pageNum=ref(1);
	const hasNextPage=ref(true)
	
	// 默认当天
	// 默认当天
	setday()
	function setday(){
		const date = new Date();
		const year = date.getFullYear();
		const month = date.getMonth() + 1;
		queryDate.value= `${year}-${month}-${date.getDate()}`
	}
	
	// 打开详情
	function openinfo(id){
		refdetails.value.show(id)
		showdetails.value=true;
	}
	
	function load() {
		console.log('预警信息load')
	}

	function hide() {
		showdetails.value=false;
		refdetails.value.hide()
	
	}

	function show() {
		reset()
		getlist()
	}
	function change(e){
		hasNextPage.value=true;
		pageNum.value=1;
		list.value=[];
		queryDate.value=e;
		getlist()
		
	}
	function confirm(e){
		hasNextPage.value=true;
		pageNum.value=1;
		list.value=[];
		getlist()
	}
	function emptydata(){
		reset()
		getlist()
	}
	function getlist(){
		gethistory({
			pageNum:pageNum.value,
			pageSize:pageSize.value,
			queryDate:queryDate.value,
			vehicleNumber:vehicleNumber.value
		}).then(r=>{
		
			list.value=list.value.concat(r.data.data);
			hasNextPage.value=r.data.hasNextPage;
		}).catch(res=>{
			console.log(res,'错误了')
		})
	}
	// 重置
	function reset(){
	
		setday()
		vehicleNumber.value=""
		Selectiondate.value.reset();
		showdate.value=false;
		hasNextPage.value=true;
		pageNum.value=1;
		list.value=[];
	}
	let _clet;
	
	// 触底
	function bottomingOut(){
		if(hasNextPage.value){
			pageNum.value=pageNum.value+1;
			getlist()
		}
	}
	defineExpose({
		load,
		hide,
		show
	})
</script>

<style scoped lang="scss">


	.scroll-view {
		height: calc(100vh - 60rpx);
		padding: 1rpx 15rpx;
		box-sizing: border-box;
		.item {
			display: flex;
			align-items: center;
			justify-content: space-around;
			background: #fff;
			border-radius: 3rpx;
			margin-bottom: 10rpx;
			overflow: hidden;
			padding: 10rpx 15rpx;
			.left {
				.t {
					display: flex;
					align-items: center;
					font-size: 9rpx;
					color: #333333;
					image {
						width: 13rpx;
						height: 13rpx;
						margin-right: 8rpx;
					}
				}
				.num {
					width: 81rpx;
					line-height: 20rpx;
					margin-top: 8rpx;
					text-align: center;
					
					font-size: 11rpx;
				}
			}
			.center {
				border-radius: 5rpx;
				overflow: hidden;
				border: 1rpx solid rgba(162, 181, 207, 0.67);
				.thead {
					background: rgba(162, 181, 207, 0.13);
					padding: 7rpx 0;
					display: flex;
					view {
						width: 90rpx;
						text-align: center;
						font-size: 9rpx;
						color: #76849D;
						flex: 1;
						position: relative;
						&:before {
							content: "";
							position: absolute;
							width: 1rpx;
							height: 13rpx;
							background: #C0CDDE;
							left: 0rpx;
							top: 50%;
							transform: translate(-0, -50%);
						}
						&:nth-of-type(1) {
							&:before {
								display: none;
							}
						}
					}
				}
				.tbody {
					display: flex;
					view {
						text-align: center;
						padding: 7rpx 0;
						flex: 1;
						font-size: 11rpx;
						color: #333333;
					}
				}
			}
			.right {
				font-size: 11rpx;
				width: 60rpx;
				text-align: center;
				padding: 5rpx 0;
				&.red{
					color: #D10B0B;
				}
			}
		}

	}

	.tabs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15rpx;
		gap: 15rpx;

		.reset {
			width: 69rpx;
			line-height: 31rpx;
			background: linear-gradient(45deg, #4F8AFF 0%, #4B5EFF 100%);
			border-radius: 3rpx;
			color: #fff;
			font-size: 11rpx;
			text-align: center;
			

		}

		.left {
			display: flex;
			align-items: center;
			background: #fff;
			border-radius: 3rpx;
			line-height: 31rpx;
			overflow: hidden;
			justify-content: space-between;
			padding: 0rpx 15rpx;
			flex: 1;

			image {
				width: 10rpx;
				height: 10rpx;
			}

			.time {
				
				font-size: 11rpx;
				color: #000000;
			}

		}

		.right {
			background: #FFFFFF;
			border-radius: 3rpx;
			width: 282rpx;
			align-items: center;
			height: 31rpx;
			padding: 5rpx 10rpx;
			display: flex;
			justify-content: space-between;

			input {
				font-size: 11rpx;
			}
		}
	}
</style>