282 lines
6.4 KiB
Vue
282 lines
6.4 KiB
Vue
<template>
|
|
<view class="top_">
|
|
<view class="icon_" @click="goBack()">
|
|
<u-icon name="arrow-left" color="#fff" size="24"></u-icon>
|
|
</view>
|
|
<view @click="goDetail(baseDataInfo.staffInfo)">
|
|
<view class="name_">员工统计详情</view>
|
|
<view class="user_img">
|
|
<image :src="baseImageUrl + baseDataInfo.staffInfo.avatar"
|
|
v-if="baseDataInfo.staffInfo &&baseDataInfo.staffInfo.avatar" mode="">
|
|
</image>
|
|
<image src="/static/imgs/yh.png" mode="" v-else></image>
|
|
</view>
|
|
<view class="user_name">{{baseDataInfo.staffInfo && baseDataInfo.staffInfo.nickname}}</view>
|
|
</view>
|
|
<uni-datetime-picker v-model="queryParams.datetimeRange" type="daterange" rangeSeparator="至"
|
|
@change="selectDate">
|
|
<view class="cont_time">
|
|
<view class="cont_size">{{queryParams.datetimeRange[0]}}</view>
|
|
<view class="bule_size">~</view>
|
|
<view class="cont_size">{{queryParams.datetimeRange[1]}}</view>
|
|
<view class=""> <u-icon name="arrow-down-fill" color="#0357FF" size="12"></u-icon></view>
|
|
</view>
|
|
</uni-datetime-picker>
|
|
|
|
<view class="kar_">
|
|
<view class="ds_">
|
|
<image src="./assets/icon1.png" mode=""></image>
|
|
<view class="">车型数量统计</view>
|
|
</view>
|
|
<view class="wr_box">
|
|
<view class="wr_boxs" v-for="(item,index) in baseDataInfo.goodsStatistics" :key="index"
|
|
@click="selectGoodsTitle(item.goodsTitle)">
|
|
<view class="num_">{{item.totalCount}}</view>
|
|
<view class="size_">{{item.goodsTitle}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="kar_">
|
|
<view class="ds_">
|
|
<image src="./assets/icon2.png" mode=""></image>
|
|
<view class="">项目数量统计</view>
|
|
</view>
|
|
<view class="wr_box">
|
|
<view class="wr_boxs" v-for="(item,index) in projectCount.children" :key="index">
|
|
<view class="num_">{{item.count}}</view>
|
|
<view class="size_">{{item.projectName}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="db_">
|
|
<view class="min_box">
|
|
<view class="ds_" style="margin-bottom: 0px;">
|
|
<image src="./assets/icon3.png" mode=""></image>
|
|
<view class="">初次检测数量</view>
|
|
</view>
|
|
<view class="num_2">
|
|
{{baseDataInfo.inspectionStatistics && baseDataInfo.inspectionStatistics.initialCheckCount}}
|
|
</view>
|
|
</view>
|
|
<view class="min_box">
|
|
<view class="ds_" style="margin-bottom: 0px;">
|
|
<image src="./assets/icon4.png" mode=""></image>
|
|
<view class="">复检检测数量</view>
|
|
</view>
|
|
<view class="num_2">
|
|
{{baseDataInfo.inspectionStatistics && baseDataInfo.inspectionStatistics.recheckCount}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import config from '../../../config';
|
|
import request from '../../../utils/request';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
queryParams: {
|
|
userId: undefined,
|
|
datetimeRange: []
|
|
},
|
|
baseDataInfo: {
|
|
staffInfo: undefined
|
|
},
|
|
projectCount: [],
|
|
baseImageUrl: config.baseImageUrl + '/'
|
|
};
|
|
},
|
|
async onLoad(option) {
|
|
if (option.userId) {
|
|
this.queryParams.userId = option.userId
|
|
}
|
|
if (option.range) {
|
|
this.queryParams.datetimeRange = JSON.parse(decodeURIComponent(option.range))
|
|
}
|
|
await this.getBaseDataInfo()
|
|
await this.getProjectCount()
|
|
},
|
|
methods: {
|
|
goBack() {
|
|
uni.navigateBack()
|
|
},
|
|
async getBaseDataInfo() {
|
|
const res = await request({
|
|
url: `/inspection/statistics/queryStaffStatisticsInfo`,
|
|
method: 'POST',
|
|
data: this.queryParams
|
|
})
|
|
this.baseDataInfo = res.data
|
|
},
|
|
async getProjectCount() {
|
|
const res = await request({
|
|
url: `/inspection/statistics/queryStaffStatisticsGroupByGoods`,
|
|
method: 'POST',
|
|
data: this.queryParams
|
|
})
|
|
this.projectCount = res.data
|
|
},
|
|
selectDate() {
|
|
this.getBaseDataInfo()
|
|
this.getProjectCount()
|
|
},
|
|
selectGoodsTitle(title) {
|
|
if (title == this.queryParams.goodsTitle) {
|
|
this.queryParams.goodsTitle = undefined
|
|
} else {
|
|
this.queryParams.goodsTitle = title
|
|
}
|
|
this.getProjectCount()
|
|
},
|
|
goDetail(data) {
|
|
uni.navigateTo({
|
|
url: `/pages/index/staffProjectList/staffProjectList?userId=${data.id}&range=${encodeURIComponent(JSON.stringify(this.queryParams.datetimeRange))}`,
|
|
});
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style lang='scss'>
|
|
.top_ {
|
|
width: 100%;
|
|
height: 620rpx;
|
|
position: relative;
|
|
background: #dea5ff;
|
|
background: url(./assets/back.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
padding-top: 100rpx;
|
|
}
|
|
|
|
.icon_ {
|
|
position: absolute;
|
|
left: 30rpx;
|
|
top: 100rpx;
|
|
}
|
|
|
|
.name_ {
|
|
text-align: center;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
|
|
.cont_time {
|
|
width: 80%;
|
|
height: 60rpx;
|
|
background: #fff;
|
|
border-radius: 36rpx;
|
|
border: 2rpx solid #0357FF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0px 30rpx;
|
|
margin: 15rpx auto;
|
|
}
|
|
|
|
.cont_size {
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #686C7A;
|
|
}
|
|
|
|
.bule_size {
|
|
color: #0357FF;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin: 0px 10rpx;
|
|
}
|
|
|
|
.user_img {
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
overflow: hidden;
|
|
border-radius: 50%;
|
|
margin: 15px auto;
|
|
margin-top: 100rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.user_name {
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
margin-bottom: 30rpx;
|
|
|
|
}
|
|
|
|
.min_box {
|
|
background: linear-gradient(180deg, #E4EFFF 0%, #FFFFFF 100%);
|
|
box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(167, 179, 229, 0.25);
|
|
width: 48%;
|
|
box-sizing: border-box;
|
|
padding: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.kar_ {
|
|
background: linear-gradient(180deg, #E4EFFF 0%, #FFFFFF 100%);
|
|
box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(167, 179, 229, 0.25);
|
|
width: 90%;
|
|
margin: 30rpx auto;
|
|
box-sizing: border-box;
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.ds_ {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 30rpx;
|
|
|
|
image {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
|
|
.wr_box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.wr_boxs {
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
color: #6D7377;
|
|
margin: 10rpx 20rpx;
|
|
width: 150rpx;
|
|
}
|
|
|
|
.num_ {
|
|
font-weight: bold;
|
|
font-size: 26px;
|
|
color: #2F353B;
|
|
}
|
|
|
|
.num_2 {
|
|
font-weight: bold;
|
|
font-size: 40rpx;
|
|
color: #2F353B;
|
|
}
|
|
|
|
.db_ {
|
|
width: 90%;
|
|
margin: 30rpx auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
</style> |