<template>
|
<view class="record_index">
|
<view class="record_index_stat">
|
<view class="stat_header">
|
<text class="stat_header_title">{{examData.examName}}</text>
|
<text>{{examData.examDate}}</text>
|
</view>
|
<view class="stat_content">
|
<view class="stat_content_item">
|
<text>考核人数</text>
|
<text class="item_value">{{statInfo.planExamUser}}人</text>
|
</view>
|
<view class="stat_content_item">
|
<text>合格人数</text>
|
<text class="item_value">{{statInfo.passExamUser}}人</text>
|
</view>
|
<view class="stat_content_item">
|
<text>合格率</text>
|
<text class="item_value">{{percent}}%</text>
|
</view>
|
</view>
|
</view>
|
<view class="record_index_list">
|
<view class="list_search">
|
<u-search
|
:showAction="true"
|
shape="square"
|
actionText="搜索"
|
placeholder="请输入姓名"
|
v-model="realName"
|
clearabled
|
:actionStyle="actionStyle"
|
bgColor="#FFFFFF"
|
borderColor="#EAEAEA"
|
@custom="searchData()">
|
</u-search>
|
</view>
|
<scroll-view
|
scroll-y="true"
|
class="list_scroll"
|
:scroll-top="scrollTop"
|
refresher-enabled="true"
|
refresher-background="#EAEAEA"
|
:refresher-triggered="triggered"
|
@refresherrefresh="refresherrefresh"
|
@scrolltolower="scrolltoLower">
|
<view
|
v-for="(item, index) in statRacordList"
|
:key="index"
|
class="list_scroll_item">
|
<view class="item_row">
|
<text>姓名</text>
|
<text style="color: #1976FF;" class="item_row_value">{{item.realName}}</text>
|
</view>
|
<view class="item_row">
|
<text>班组</text>
|
<text class="item_row_value">{{item.groupName || ''}}</text>
|
</view>
|
<view class="item_row">
|
<text>参加考核时间</text>
|
<text class="item_row_value">{{item.startTime}}</text>
|
</view>
|
<view class="item_row">
|
<text>考核成绩</text>
|
<text class="item_row_value">{{item.score}}</text>
|
</view>
|
<view class="item_row">
|
<text>考核结果</text>
|
<text class="item_row_value">{{item.pass == 1 ? '合格' : item.pass == 0 ? '不合格' : ''}}</text>
|
</view>
|
<view class="item_row">
|
<text>用时</text>
|
<text class="item_row_value">{{item.useTime}}</text>
|
</view>
|
</view>
|
<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
|
</scroll-view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { throttle } from '../../plugins/public';
|
export default {
|
data() {
|
return {
|
examData: {},
|
realName: '',
|
pageNum: 1,
|
pageSize: 10,
|
loadPage: 0,
|
scrollTop: 0,
|
triggered: true,
|
status: 'loading',
|
iconType: 'flower',
|
loadText: {
|
loading: '努力加载中',
|
nomore: '没有更多数据了'
|
},
|
actionStyle: {
|
'margin-left': '0',
|
'width': '60px',
|
'height': '32px',
|
'line-height' : '32px',
|
'border': '1px solid #1976FF',
|
'border-left': 'none',
|
'color': '#FFFFFF',
|
'background': '#1976FF',
|
'border-radius': '0 4px 4px 0'
|
},
|
statRacordList: [],
|
statInfo: {
|
passExamUser: 0,
|
totalExamUser: 0
|
}
|
}
|
},
|
onLoad(option) {
|
const data = JSON.parse(option.data);
|
this.examData = data;
|
console.log(data,'====');
|
this.getExamRecordStatistical(data.examId);
|
this.searchData();
|
},
|
methods: {
|
// 获取统计信息
|
async getExamRecordStatistical(examId) {
|
const { data } = await this.$api.labourSystem.getExamRecordStatistical({
|
examId: examId
|
});
|
this.statInfo = data;
|
},
|
// 查询考核记录
|
async searchSafetyCheckRecord() {
|
const { data } = await this.$api.labourSystem.searchSafetyCheckRecord({
|
pageNum: this.pageNum,
|
pageSize: this.pageSize,
|
examId: this.examData.examId,
|
realName: this.realName
|
});
|
return data;
|
},
|
searchData() {
|
this.triggered = true;
|
this.statRacordList = [];
|
this.searchSafetyCheckRecord().then(data => {
|
this.statRacordList = data.list;
|
this.loadPage = data.pages;
|
this.triggered = false;
|
this.status = 'nomore';
|
}).catch(() => {
|
this.triggered = false;
|
this.status = 'nomore';
|
uni.$u.toast('没有更数据了');
|
})
|
},
|
//自定义下拉刷新
|
refresherrefresh: throttle(function() {
|
this.status = 'loading';
|
this.pageNum = 1;
|
this.searchSafetyCheckRecord();
|
uni.$u.toast('刷新成功');
|
}, 500),
|
//触底刷新
|
scrolltoLower: throttle(function() {
|
this.status = 'loading';
|
if(this.pageNum >= this.loadPage) {
|
setTimeout(() => {
|
this.status = 'nomore'
|
uni.$u.toast('没有更多数据了');
|
},1000)
|
return
|
} else {
|
this.pageNum += 1;
|
this.searchSafetyCheckRecord().then((data) => {
|
this.loadPage = data.pages;
|
this.statRacordList.push(...data.list);
|
this.status = 'nomore';
|
})
|
}
|
}, 1500),
|
},
|
computed: {
|
percent() {
|
if(this.statInfo.passExamUser != 0 && this.statInfo.totalExamUser != 0) {
|
const number = Math.floor(this.statInfo.passExamUser / this.statInfo.totalExamUser * 100) / 100;
|
return number * 100;
|
} else {
|
return 0;
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.record_index {
|
height: 100vh;
|
background: #F6F6F6;
|
|
.record_index_stat {
|
padding: 20px;
|
color: #999999;
|
background: #FFFFFF;
|
|
.stat_header {
|
position: relative;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding-left: 10px;
|
|
&:before {
|
content: '';
|
position: absolute;
|
top: 50%;
|
left: 0;
|
transform: translateY(-50%);
|
width: 3px;
|
height: 80%;
|
background: #1976FF;
|
}
|
|
.stat_header_title {
|
color: #333333;
|
font-size: 20px;
|
}
|
}
|
|
.stat_content {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 15px;
|
|
.stat_content_item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
|
.item_value {
|
padding-top: 4px;
|
color: #1976FF;
|
font-size: 18px;
|
}
|
}
|
}
|
}
|
|
.record_index_list {
|
padding: 0 10px;
|
margin-top: 6px;
|
height: 82%;
|
background: #FFFFFF;
|
|
.list_search {
|
padding: 20px 0;
|
}
|
|
.list_scroll {
|
height: 88%;
|
|
.list_scroll_item {
|
display: flex;
|
flex-direction: column;
|
padding: 10px;
|
margin: 10px 0;
|
border: 1px solid #EAEAEA;
|
border-radius: 6px;
|
|
&:first-child {
|
margin-top: 0;
|
}
|
|
.item_row {
|
display: flex;
|
justify-content: space-between;
|
padding: 5px;
|
color: #999;
|
|
.item_row_value {
|
color: #333;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
::v-deep .u-search__content {
|
border-radius: 4px 0 0 4px !important;
|
}
|
</style>
|
