388 lines
8.5 KiB
Vue
388 lines
8.5 KiB
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> |