detection-business/pages/index/countEmployees.vue

<template>
	<view class="">
		<headersVue :titles="titles">
			<u-icon name="arrow-left" color="#fff" size="18"></u-icon>
		</headersVue>
		<view class="content">
			<view>
				<u-subsection :list="dateRangeList" keyName="label" :current="selected"
					@change="slectRange"></u-subsection>
			</view>
			<view style="margin-top: 20rpx">
				<uni-datetime-picker v-model="queryParams.datetimeRange" type="daterange" rangeSeparator="至"
					@change="getStaffCount" />
			</view>
			<!-- 顶部选择区域 -->
			<!-- <view class="top_">
				<view class="select-container" @click="showDropdown">
					<view class="select-text">
						{{ queryStr != null ? queryStr : '请选择工作内容' }}
					</view>
					<u-icon style="margin-left: 10rpx;" name="arrow-down" size="18" color="#8D90A6"></u-icon>
				</view>
				<u-icon v-if="queryStr" name="close-circle" color="#8D90A6" size="18" @click="clearSelection"></u-icon>
			</view> -->

			<!-- 列表区域 -->
			<view class="list_">
				<view class="list_title">
					<view class="list_ds">
						<view style="margin-right: 50px">排名</view>
						<view>员工</view>
					</view>
					<view>服务台次</view>
				</view>
				<view class="list_box" v-for="(item, index) in List" :key="index">
					<view class="list_box_top" @click="goDetail(item)">
						<view class="pm_" v-if="index != 0 && index != 2 && index != 1">{{
              index + 1
            }}</view>
						<view class="pm_ one" v-if="index == 0">{{ index + 1 }}</view>
						<view class="pm_ two" v-if="index == 1">{{ index + 1 }}</view>
						<view class="pm_ three" v-if="index == 2">{{ index + 1 }}</view>
						<view class="list_ds">
							<view class="tx_">
								<image v-if="item.avatar" style="border-radius: 50%"
									:src="baseImageUrl + '/' + item.avatar" mode=""></image>
								<image src="/static/imgs/touxiang.png" v-else mode=""></image>
							</view>
							<view>
								<view>{{ item.nickname }}</view>
								<view class="num_hui">{{ item.mobile }}</view>
							</view>
						</view>
						<view>{{ item.totalCount }}</view>
					</view>
					<scroll-view class="scroll-wrap" scroll-x>
						<view class="scroll-item" v-for="data in item.children" :key="data.projectName">
							<view class="scroll-label">{{ data.projectName }}</view>
							<view class="scroll-value">{{ data.count }}</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<!-- 选择器 -->
		<u-picker :show="isShowScreen" :columns="[columns]" @cancel="handleCancel" keyName="projectName"
			@confirm="submitScreen"></u-picker>
	</view>
</template>

<script>
	import headersVue from "../../components/header/headers.vue";
	import request from "@/utils/request";
	import config from "config";
	import {
		getDateRange
	} from "@/utils/utils";

	export default {
		data() {
			return {
				titles: "员工统计",
				List: [],
				selectList: [],
				useSelectList: [],
				show: false,
				status: "loading",
				baseImageUrl: config.baseImageUrl,
				isShowScreen: false,
				columns: [],
				queryParams: {},
				queryStr: null,
				selected: "day",
				dateRangeList: [{
						label: "本日",
						value: "day",
					},
					{
						label: "本月",
						value: "month",
					},
				],
			};
		},
		components: {
			headersVue,
		},
		onLoad() {
			const now = new Date();
			this.setCurrentMonthRange();

			this.getStaffCount();
			this.getInspectionProject();
		},
		methods: {
			// 获取员工统计
			getStaffCount() {
				request({
					url: "/partnerOwn/partner/getStaffCount",
					method: "post",
					data: this.queryParams,
				}).then((res) => {
					this.$nextTick(() => {
						this.List = res.data;
					});
				});
			}, // 补零：1 → 01
			pad(n) {
				return n.toString().padStart(2, "0");
			},
			// Date → "YYYY-MM-DD"
			formatDate(d) {
				// 添加类型检查，确保 d 是 Date 对象
				if (!(d instanceof Date)) {
					console.error("formatDate() 期望接收 Date 对象，但收到:", d);
					d = new Date(d); // 尝试转换为 Date 对象
					if (isNaN(d.getTime())) {
						// 检查是否有效日期
						d = new Date(); // 如果转换失败，使用当前日期
					}
				}
				return `${d.getFullYear()}-${this.pad(d.getMonth() + 1)}-${this.pad(
        d.getDate()
      )}`;
			},

			// 设置本月起止日期：月初到今天
			setCurrentMonthRange() {
				// 直接使用 Date 对象
				const now = new Date();

				// 创建月初的 Date 对象
				const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);

				this.queryParams.datetimeRange = [
					this.formatDate(now), // 月初
					this.formatDate(now), // 今天
				];
			},

			// 辅助函数：补零
			pad(num) {
				return num.toString().padStart(2, "0");
			},
			// 获取工作内容列表
			getInspectionProject() {
				request({
					url: "/inspection/dl-inspection-project/page",
					method: "get",
					params: {
						pageNo: 1,
						pageSize: 10000,
					},
				}).then((res) => {
					this.columns = res.data.records;
				});
			},
			slectRange(e) {
				this.selected = e;
				console.log(e, this.selected);
				const {
					value
				} = this.dateRangeList[e];
				console.log(value);
				// this.queryParams.datetimeRange = [
				//   this.formatDate(firstDay),
				//   this.formatDate(now)
				// ];
				this.queryParams.datetimeRange = getDateRange(value);
				this.getStaffCount();
			},

			goDetail(data) {
				uni.navigateTo({
					url: `/pages/index/staffProjectList/staffProjectList?userId=${data.userId}`,
				});
			},
			// 显示下拉框
			showDropdown() {
				this.isShowScreen = true;
			},
			// 处理选择器确认事件
			submitScreen(e) {
				this.isShowScreen = false;
				this.queryParams.id = e.value[0].id;
				this.queryStr = e.value[0].projectName;
				this.getStaffCount();
			},
			// 处理选择器取消事件
			handleCancel() {
				this.isShowScreen = false;
			},
			// 清除选择
			clearSelection() {
				this.queryParams.id = null;
				this.queryStr = null;
				this.getStaffCount();
			},
		},
	};
</script>

<style scoped lang="scss">
	.content {
		background: #f7f8fc;
		width: 100%;
		padding-top: 200rpx;
	}

	.top_ {
		width: 100%;
		height: 104rpx;
		background: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #f5f5f5;

		.select-container {
			display: flex;
			align-items: center;
			flex: 1; // 让这个区域撑满可用空间
		}

		.select-text {
			font-size: 28rpx;
			color: #101a3e;
		}
	}

	.list_ {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.list_title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #101a3e;
		box-sizing: border-box;
		padding: 0 30rpx;
		margin-bottom: 20rpx;
	}

	.list_ds {
		display: flex;
		align-items: center;
	}

	.list_box {
		width: 100%;
		background: #ffffff;
		border-radius: 8rpx;
		margin-bottom: 30rpx;
	}

	.list_box_top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 30rpx 50rpx;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.list_box_bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 50rpx;
	}

	.tx_ {
		width: 90rpx;
		height: 90rpx;
		margin-right: 5px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.num_hui {
		font-size: 24rpx;
		color: #8d90a6;
	}

	.text_ {
		font-size: 28rpx;
		color: #8d90a6;
	}

	.num_ {
		font-size: 28rpx;
		color: #101a3e;
	}

	.pm_ {
		width: 40rpx;
		height: 40rpx;
		background: #327dfb;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 28rpx;
	}

	.one {
		background: url(../../static/imgs/oneStaff.png);
		width: 55rpx;
		/* height: 156px; */
		background-repeat: no-repeat;
		background-size: cover;
	}

	.two {
		background: url(../../static/imgs/twoStaff.png);
		width: 55rpx;
		/* height: 156px; */
		background-repeat: no-repeat;
		background-size: cover;
	}

	.three {
		background: url(../../static/imgs/threeStaff.png);
		width: 55rpx;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.scroll-wrap {
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		overflow-x: auto;
		padding: 16rpx;
	}

	.scroll-item {
		flex-shrink: 0;
		display: inline-block;
		border-radius: 12rpx;
		padding: 12rpx 20rpx;
		margin-right: 20rpx;
		min-width: 180rpx;
	}

	.scroll-label {
		font-size: 26rpx;
		font-weight: 500;
		color: #555;
	}

	.scroll-value {
		font-size: 28rpx;
		color: #000;
		margin-top: 6rpx;
	}
</style>