chuangte_bike_newxcx/page_shanghu/gongzuotai/diaodujl.vue

<template>
	<view class="page">
		<u-navbar title="调度记录" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='36' id="navbar">
		</u-navbar>
		<view class="date-search-container">
			<view class="" style="display: flex;align-items: center;">
				<!-- 日期选择区间 -->
				<view class="date-range">
					<view class="time" @click="btnonetime">
						{{startDate}}
					</view>
					<text class="range-text">至</text>
					<view class="time" @click="btnonetimes">
						{{endDate}}
					</view>
				</view>
				<!-- 搜索按钮 -->
				<view class="search-btn" @click="getlist">
					<u-icon name="search" color="#3D3D3D" size="28"></u-icon>
				</view>
			</view>
		</view>
		<view class="list_box">
			<view class="top">
				<view class="">
					姓名
				</view>
				<view class="">
					手机号
				</view>
				<view class="">
					有效次数
				</view>
				<view class="">
					无效次数
				</view>
			</view>
			<view class="list" v-for="(item,index) in dhlist" :key="index" @click="btnitem(item)">
				<view class="">
					{{item.userName}}
				</view>
				<view class="">
					{{item.userPhone}}
				</view>
				<view class="">
					{{item.validCount}}
				</view>
				<view class="">
					{{item.invalidCount}}   <u-icon name="arrow-right" color="#3D3D3D" size="28"></u-icon>
				</view>
			</view>
			<view class="" style="margin-top: 30rpx;color: #ccc;width: 100%;text-align: center;">
				当前没有更多调度记录咯...
			</view>
		</view>
        <u-picker mode="time" v-model="show" :params="params" @confirm="confirmone"></u-picker>
		<u-picker mode="time" v-model="shows" :params="paramss" @confirm="confirmones"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#fff",
				},
				areaId: '',
				startDate: '', // 初始开始日期
				endDate: '' ,// 初始结束日期
			    dhlist:[],
				userId:'',
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				show: false,
				paramss: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				shows: false
			}
		},
		onLoad(option) {
			this.startDate = this.getCurrentDate().formatted
			this.endDate = this.getCurrentDate().formatted
			this.areaId = option.areaId
			this.getlist()
		},
		methods: {
			btnonetime(){
				this.show = true
			},
			confirmone(e){
				console.log(e);
				this.startDate = e.year + '-' + e.month + '-' + e.day
			},
			btnonetimes(){
				this.shows = true
			},
			confirmones(e){
				console.log(e);
				this.endDate = e.year + '-' + e.month + '-' + e.day
			},
			// 请求调度记录
			getlist(){
				this.$u.get(`/dashboard/dispatchLog/userFinishRank?areaId=${this.areaId}&endDateRange=${this.startDate + ',' + this.endDate}`).then(res =>{
					if(res.code == 200){
						this.dhlist = res.data
					}
				})
			},
			// 点击跳转到调度列表
			btnitem(item){
				uni.navigateTo({
					url:'/page_shanghu/gongzuotai/diaodulist?tit=' + item.userName + '&userId=' + item.userId + '&areaId=' + this.areaId 
				})
			},
			getCurrentDate() {
			  const date = new Date(); // 获取当前时间对象
			  
			  // 获取年份（4位数字）
			  const year = date.getFullYear();
			  
			  // 获取月份（注意：月份从 0 开始，需 +1 转换为实际月份）
			  const month = date.getMonth() + 1;
			  
			  // 获取日期（当月的第几天）
			  const day = date.getDate();
			  
			  // 格式化：补零（可选，例如将 3 月转为 "03"）
			  const formattedMonth = month.toString().padStart(2, '0');
			  const formattedDay = day.toString().padStart(2, '0');
			  
			  // 组合结果
			  const currentDate = {
			    year,               // 年（如：2025）
			    month,              // 月（如：11，未补零）
			    day,                // 日（如：6，未补零）
			    formatted: `${year}-${formattedMonth}-${formattedDay}` // 格式化字符串（如：2025-11-06）
			  };
			  
			  console.log('当天年月日：', currentDate);
			  return currentDate;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
    .list_box{
		margin-top: 120rpx;
		.top{
			display: flex;
			justify-content: space-between;
			width: 100%;
			height: 82rpx;
			line-height: 82rpx;
			background-color: #F6F6F6;
			box-sizing: border-box;
			view{
				text-align: center;
				width: 100%;
				font-size: 28rpx;
				color: #3D3D3D;
			}
		}
		.list{
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #D8D8D8;
			view{
				text-align: center;
				width: 100%;
				height: 110rpx;
				line-height: 110rpx;
				font-size: 28rpx;
				color: #3D3D3D;
			}
		}
	}
	.tab {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		padding-left: 40rpx;
		box-sizing: border-box;
		view{
			text{
				margin-right: 10rpx;
				font-size: 32rpx;
				color: #3D3D3D;
			}
		}
	}

	.date-search-container {
		padding: 10px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		margin-top: 16rpx;
		box-sizing: border-box;
		position: fixed;
		top: 150rpx;
		left: 0;
		width: 100%;
	}

	.date-range {
		display: flex;
		align-items: center;
		flex: 1;
		padding-left: 82rpx;
		box-sizing: border-box;

		.time {
			width: 190rpx;
			height: 52rpx;
			border-radius: 38rpx 38rpx 38rpx 38rpx;
			border: 1rpx solid #AFAFAF;
			text-align: center;
			line-height: 52rpx;
			color: #817F7F;
		}
	}

	.uni-datepicker {
		width: auto !important;
		/* 覆盖组件默认宽度，自适应内容 */
		margin-right: 10px;
	}

	.range-text {
		margin: 0 40rpx;
		color: #999;
	}

	.search-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-right: 64rpx;
		box-sizing: border-box;
	}
</style>