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 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";

	export default {
		data() {
			return {
				titles: "员工统计",
				List: [],
				selectList: [],
				useSelectList: [],
				show: false,
				status: 'loading',
				baseImageUrl: config.baseImageUrl,
				isShowScreen: false,
				columns: [],
				queryParams: {},
				queryStr: null,
			};
		},
		components: {
			headersVue,
		},
		onLoad() {
      const now = new Date();
      this.queryParams.datetimeRange = [
        new Date(now.getFullYear(), now.getMonth(), 1).getTime(),
        now.getTime()
      ];


      this.getStaffCount();
			this.getInspectionProject();
		},
		methods: {
			// 获取员工统计
			getStaffCount() {
				request({
					url: '/partnerOwn/partner/getStaffCount',
					method: 'post',
					data: this.queryParams,
				}).then((res) => {
					this.$nextTick(() => {
						this.List = res.data;
					});
				});
			},
			// 获取工作内容列表
			getInspectionProject() {
				request({
					url: '/inspection/dl-inspection-project/page',
					method: 'get',
					params: {
						pageNo: 1,
						pageSize: 10000,
					},
				}).then((res) => {
					this.columns = res.data.records;
				});
			},
			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>