chuangte_bike_newxcx/page_shanghu/gongzuotai/diaodujl.vue

<template>
	<view class="page">
		<u-navbar title="调度记录" :border-bottom="false" :background="bgc" back-icon-color="#000" title-color='#000'
			title-size='36' height='44'></u-navbar>

		<view class="fixed-header">
			<view class="search-box">
				<view class="date-picker-group">
					<view class="date-btn" hover-class="date-btn--press app-tap-hover" hover-stay-time="80" @click="btnonetime">
						<text class="date-text">{{ startDate }}</text>
						<u-icon name="calendar" color="#9CA3AF" size="28" class="date-ico"></u-icon>
					</view>
					<text class="separator">至</text>
					<view class="date-btn" hover-class="date-btn--press app-tap-hover" hover-stay-time="80" @click="btnonetimes">
						<text class="date-text">{{ endDate }}</text>
						<u-icon name="calendar" color="#9CA3AF" size="28" class="date-ico"></u-icon>
					</view>
				</view>
				<view class="search-icon-btn" hover-class="search-icon-btn--press app-tap-hover" hover-stay-time="80" @click="getlist">
					<u-icon v-if="!listLoading" name="search" color="#fff" size="34"></u-icon>
					<u-loading v-else mode="circle" color="#ffffff" size="34"></u-loading>
				</view>
			</view>

			<view class="summary-bar">
				<view class="summary-row">
					<view class="summary-item">
						<text class="s-label">总人数</text>
						<text class="s-num s-num--primary">{{ statsSummary.userCount }}</text>
					</view>
					<view class="summary-dot"></view>
					<view class="summary-item">
						<text class="s-label">有效合计</text>
						<text class="s-num s-num--ok">{{ statsSummary.totalValid }}</text>
					</view>
					<view class="summary-dot"></view>
					<view class="summary-item">
						<text class="s-label">无效合计</text>
						<text class="s-num s-num--bad">{{ statsSummary.totalInvalid }}</text>
					</view>
					<view class="summary-dot"></view>
					<view class="summary-item summary-item--wide">
						<text class="s-label">总次数</text>
						<text class="s-num s-num--total">{{ statsSummary.totalAll }}</text>
					</view>
				</view>
				<text class="summary-hint">总次数 = 各人员有效次数与无效次数之和</text>
			</view>
		</view>

		<scroll-view class="list-scroll" scroll-y :show-scrollbar="false" :enable-back-to-top="true"
			refresher-enabled :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
			<view class="list-inner">
				<view class="card" v-for="(item,index) in dhlist" :key="index" hover-class="card--press app-tap-hover"
					hover-stay-time="70" @click="btnitem(item)">
					<view class="card-content">
						<view class="user-row">
							<view class="avatar-wrap">
								<text class="avatar-txt">{{ nameInitial(item.userName) }}</text>
							</view>
							<view class="user-main">
								<text class="name">{{ item.userName || '未命名' }}</text>
								<text class="phone">{{ item.userPhone || '--' }}</text>
							</view>
							<view class="total-chip">
								<!-- <text class="t-label">总次数</text>
								<text class="t-val">{{ rowTotal(item) }}</text> -->
							</view>
							<u-icon name="arrow-right" color="#D1D5DB" size="26"></u-icon>
						</view>

						<view class="divider-line"></view>

						<view class="data-grid">
							<view class="data-item">
								<text class="label">有效次数</text>
								<text class="value success">{{ item.validCount || 0 }}</text>
							</view>
							<view class="v-line"></view>
							<view class="data-item">
								<text class="label">无效次数</text>
								<text class="value error">{{ item.invalidCount || 0 }}</text>
							</view>
							<view class="v-line"></view>
							<view class="data-item">
								<text class="label">总次数</text>
								<text class="value total">{{ rowTotal(item) }}</text>
							</view>
						</view>
					</view>
				</view>

				<view v-if="!listLoading && dhlist.length === 0" class="empty-state">
					<view class="empty-ico">📋</view>
					<text class="empty-title">暂无调度记录</text>
					<text class="empty-sub">可调整日期区间后点击搜索</text>
				</view>

				<view v-else class="footer-text">
					{{ dhlist.length === 0 ? '' : '— 已显示全部 ' + dhlist.length + ' 条 —' }}
				</view>
				<view class="scroll-pad"></view>
			</view>
		</scroll-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,
				listLoading: false,
				isRefreshing: false
			}
		},
		computed: {
			statsSummary() {
				const list = this.dhlist || []
				let totalValid = 0
				let totalInvalid = 0
				list.forEach((item) => {
					totalValid += Number(item.validCount) || 0
					totalInvalid += Number(item.invalidCount) || 0
				})
				return {
					userCount: list.length,
					totalValid,
					totalInvalid,
					totalAll: totalValid + totalInvalid
				}
			}
		},
		onLoad(option) {
			this.startDate = this.getCurrentDate().formatted
			this.endDate = this.getCurrentDate().formatted
			this.areaId = option.areaId
			this.getlist()
		},
		methods: {
			rowTotal(item) {
				const v = Number(item.validCount) || 0
				const i = Number(item.invalidCount) || 0
				return v + i
			},
			nameInitial(name) {
				const s = (name || '未').trim()
				return s.slice(0, 1)
			},
			onRefresh() {
				this.isRefreshing = true
				this.getlist(true)
			},
			btnonetime() {
				this.show = true
			},
			confirmone(e) {
				this.startDate = e.year + '-' + e.month + '-' + e.day
			},
			btnonetimes() {
				this.shows = true
			},
			confirmones(e) {
				this.endDate = e.year + '-' + e.month + '-' + e.day
			},
			parseYmd(str) {
				const p = (str || '').split('-').map((n) => parseInt(n, 10))
				if (p.length !== 3 || p.some((x) => !Number.isFinite(x))) return null
				return new Date(p[0], p[1] - 1, p[2])
			},
			getlist(fromRefresh = false) {
				if (!this.areaId) {
					uni.showToast({ title: '缺少运营区参数', icon: 'none' })
					if (fromRefresh) this.isRefreshing = false
					return
				}
				const a = this.parseYmd(this.startDate)
				const b = this.parseYmd(this.endDate)
				if (a && b && a > b) {
					uni.showToast({ title: '开始日期不能晚于结束日期', icon: 'none' })
					if (fromRefresh) this.isRefreshing = false
					return
				}
				if (!fromRefresh) this.listLoading = true
				this.$u.get(`/dashboard/dispatchLog/userFinishRank?areaId=${this.areaId}&endDateRange=${this.startDate + ',' + this.endDate}`)
					.then((res) => {
						if (res.code == 200) {
							this.dhlist = res.data || []
						} else {
							uni.showToast({ title: res.msg || '加载失败', icon: 'none' })
							this.dhlist = []
						}
					})
					.catch(() => {
						uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' })
					})
					.finally(() => {
						this.listLoading = false
						if (fromRefresh) this.isRefreshing = false
					})
			},
			btnitem(item) {
				uni.navigateTo({
					url: '/page_shanghu/gongzuotai/diaodulist?tit=' + encodeURIComponent(item.userName || '') +
						'&userId=' + item.userId + '&areaId=' + this.areaId
				})
			},
			getCurrentDate() {
				const date = new Date()
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				const formattedMonth = month.toString().padStart(2, '0')
				const formattedDay = day.toString().padStart(2, '0')
				return {
					year,
					month,
					day,
					formatted: `${year}-${formattedMonth}-${formattedDay}`
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F3F4F6;
	}

	.page {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.fixed-header {
		flex-shrink: 0;
		width: 100%;
		z-index: 10;
		background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
		box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.06);
		border-radius: 0 0 28rpx 28rpx;
	}

	.search-box {
		padding: 24rpx 28rpx 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.date-picker-group {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #F3F4F6;
			padding: 8rpx;
			border-radius: 44rpx;
			margin-right: 20rpx;
			border: 1rpx solid rgba(226, 232, 240, 0.9);

			.date-btn {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 64rpx;
				font-size: 26rpx;
				color: #1F2937;
				background: #fff;
				border-radius: 36rpx;
				margin: 0 6rpx;
				box-shadow: 0 2rpx 8rpx rgba(15, 23, 42, 0.04);

				.date-text {
					max-width: 180rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.date-ico {
					margin-left: 8rpx;
					flex-shrink: 0;
				}
			}

			.date-btn--press {
				opacity: 0.88;
				transform: scale(0.98);
			}

			.separator {
				color: #9CA3AF;
				font-size: 22rpx;
				padding: 0 4rpx;
				flex-shrink: 0;
			}
		}

		.search-icon-btn {
			width: 84rpx;
			height: 84rpx;
			background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 8rpx 20rpx rgba(59, 130, 246, 0.35);
			flex-shrink: 0;
		}

		.search-icon-btn--press {
			opacity: 0.92;
			transform: scale(0.95);
		}
	}

	.summary-bar {
		margin: 0 24rpx 20rpx;
		padding: 24rpx 20rpx 20rpx;
		background: linear-gradient(135deg, rgba(239, 246, 255, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%);
		border-radius: 24rpx;
		border: 1rpx solid rgba(191, 219, 254, 0.6);
		box-shadow: 0 8rpx 28rpx rgba(59, 130, 246, 0.08);
	}

	.summary-row {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 12rpx 8rpx;
	}

	.summary-item {
		flex: 1;
		min-width: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;

		&--wide {
			min-width: 140rpx;
		}
	}

	.s-label {
		font-size: 22rpx;
		color: #6B7280;
		margin-bottom: 8rpx;
		line-height: 1.3;
	}

	.s-num {
		font-size: 34rpx;
		font-weight: 700;
		line-height: 1.2;
		font-variant-numeric: tabular-nums;

		&--primary {
			color: #2563EB;
		}

		&--ok {
			color: #059669;
		}

		&--bad {
			color: #DC2626;
		}

		&--total {
			color: #1D4ED8;
			font-size: 38rpx;
		}
	}

	.summary-dot {
		width: 1rpx;
		height: 48rpx;
		background: linear-gradient(180deg, transparent, #BFDBFE, transparent);
		align-self: center;
		margin-top: 8rpx;
	}

	.summary-hint {
		display: block;
		margin-top: 16rpx;
		padding-top: 16rpx;
		border-top: 1rpx dashed rgba(147, 197, 253, 0.6);
		font-size: 22rpx;
		color: #94A3B8;
		line-height: 1.5;
		text-align: center;
	}

	.list-scroll {
		// flex: 1;
		height: 68vh;
		min-height: 200rpx;
		padding-top: 10rpx;
	}

	.list-inner {
		padding: 8rpx 24rpx 0;
		box-sizing: border-box;
	}

	.card {
		background: rgba(255, 255, 255, 0.98);
		border-radius: 24rpx;
		padding: 28rpx 28rpx 26rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 12rpx 36rpx rgba(15, 23, 42, 0.06);
		border: 1rpx solid rgba(255, 255, 255, 0.9);
	}

	.card--press {
		opacity: 0.96;
		transform: scale(0.995);
	}

	.user-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 16rpx;
	}

	.avatar-wrap {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #93C5FD 0%, #3B82F6 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.25);
	}

	.avatar-txt {
		font-size: 30rpx;
		font-weight: 700;
		color: #fff;
	}

	.user-main {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 6rpx;
	}

	.name {
		font-size: 32rpx;
		font-weight: 600;
		color: #111827;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.phone {
		font-size: 24rpx;
		color: #9CA3AF;
		font-variant-numeric: tabular-nums;
	}

	.total-chip {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-right: 8rpx;
		flex-shrink: 0;
	}

	.total-chip .t-label {
		font-size: 20rpx;
		color: #9CA3AF;
		margin-bottom: 4rpx;
	}

	.total-chip .t-val {
		font-size: 32rpx;
		font-weight: 800;
		color: #1D4ED8;
		font-variant-numeric: tabular-nums;
	}

	.divider-line {
		height: 1rpx;
		background: linear-gradient(90deg, transparent, #E5E7EB 12%, #E5E7EB 88%, transparent);
		margin: 22rpx 0 20rpx;
	}

	.data-grid {
		display: flex;
		align-items: stretch;

		.v-line {
			width: 1rpx;
			flex-shrink: 0;
			background: linear-gradient(180deg, transparent, #E5E7EB, transparent);
			margin: 8rpx 0;
		}

		.data-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			min-width: 0;

			.label {
				font-size: 22rpx;
				color: #9CA3AF;
				margin-bottom: 10rpx;
			}

			.value {
				font-size: 34rpx;
				font-weight: 700;
				font-variant-numeric: tabular-nums;

				&.success {
					color: #059669;
				}

				&.error {
					color: #DC2626;
				}

				&.total {
					color: #2563EB;
				}
			}
		}
	}

	.empty-state {
		padding: 100rpx 40rpx 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.empty-ico {
		font-size: 72rpx;
		margin-bottom: 20rpx;
		opacity: 0.45;
	}

	.empty-title {
		font-size: 30rpx;
		color: #6B7280;
		font-weight: 500;
		margin-bottom: 12rpx;
	}

	.empty-sub {
		font-size: 24rpx;
		color: #9CA3AF;
	}

	.footer-text {
		text-align: center;
		color: #9CA3AF;
		font-size: 22rpx;
		padding: 24rpx 0 8rpx;
	}

	.scroll-pad {
		height: calc(32rpx + constant(safe-area-inset-bottom));
		height: calc(32rpx + env(safe-area-inset-bottom));
	}

	.loading-text {
		text-align: center;
		color: #999;
		font-size: 24rpx;
		padding: 30rpx 0;
	}
</style>