80%
This commit is contained in:
85
pages/attendance/attendance_detail/attendance_detail.vue
Normal file
85
pages/attendance/attendance_detail/attendance_detail.vue
Normal file
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="page-top">
|
||||
<u-navbar title="考勤管理" placeholder bgColor="transparent" autoBack leftIconColor="#fff"
|
||||
titleStyle="color:white">
|
||||
</u-navbar>
|
||||
|
||||
</view>
|
||||
<view class="sizedbox" style="height: 88rpx;">
|
||||
</view>
|
||||
<view class="tabs">
|
||||
<view :class="`tab-item ${activeIndex==0?'active':''}`" @tap="switchTab(0)">考勤统计</view>
|
||||
<view :class="`tab-item ${activeIndex==1?'active':''}`" @tap="switchTab(1)">考勤记录</view>
|
||||
<view :class="`tab-item ${activeIndex==2?'active':''}`" @tap="switchTab(2)">出入记录</view>
|
||||
</view>
|
||||
<view class="sizedbox" style="height: 80rpx;">
|
||||
</view>
|
||||
<view class="sized-box" style="height:var(--status-bar-height);"></view>
|
||||
<Statistics v-if="activeIndex==0"></Statistics>
|
||||
<Record v-else-if="activeIndex==1"></Record>
|
||||
<IoRecord v-else-if="activeIndex==2"></IoRecord>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Statistics from './statistics/statistics.vue'
|
||||
import Record from './record/record.vue'
|
||||
import IoRecord from './io_record/io_record.vue'
|
||||
export default {
|
||||
name: 'AttendanceDetail',
|
||||
components: {
|
||||
Record,
|
||||
IoRecord,
|
||||
Statistics
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeIndex: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switchTab(index) {
|
||||
this.activeIndex = index
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.page-top {
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
position: fixed;
|
||||
background: linear-gradient(to top right, #496df6, #2e9ee8);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 100rpx 0;
|
||||
height: 80rpx;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
z-index: 99;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
.tab-item {
|
||||
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 30rpx;
|
||||
color: #8F959E;
|
||||
font-weight: 400;
|
||||
|
||||
&.active {
|
||||
color: #0F40F5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
195
pages/attendance/attendance_detail/io_record/io_record.vue
Normal file
195
pages/attendance/attendance_detail/io_record/io_record.vue
Normal file
@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-datetime-picker :show="showDatePicker" v-model="date" mode="date" @cancel="showDatePicker=false"
|
||||
@confirm="showDatePicker=false" @change="dateChanged">
|
||||
</u-datetime-picker>
|
||||
<view class="date-picker-btn" @tap="showDatePicker=true">
|
||||
{{new Date(date).getFullYear()}}-{{new Date(date).getMonth()+1}}-{{new Date(date).getDate()}}
|
||||
<u-icon name="calendar" color="#2979ff" size="24"></u-icon>
|
||||
</view>
|
||||
<view class="record-list">
|
||||
<view class="record-item" v-for="(item ,index) in recordList" :key="index">
|
||||
<!-- <view class="record-status"
|
||||
:style="`background-image: linear-gradient(219deg, ${statusDict[item.status].color1} 0%, ${statusDict[item.status].color2} 99%)`">
|
||||
<text>{{statusDict[item.status].name}}</text>
|
||||
</view> -->
|
||||
<image class="photo" src="../../../../attendance_photo_example.png" mode=""></image>
|
||||
<view class="desc">
|
||||
<view class="desc-item">
|
||||
<text class="key">姓名：</text>
|
||||
<text class="value">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<text class="key">年龄：</text>
|
||||
<text class="value">{{item.age}}</text>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<text class="key">联系方式：</text>
|
||||
<text class="value">{{item.phone}}</text>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<text class="key">身份证号：</text>
|
||||
<text class="value">{{item.idCard}}</text>
|
||||
</view>
|
||||
|
||||
<view class="desc-item-row">
|
||||
<view class="desc-item">
|
||||
<text class="key">进门时间：</text>
|
||||
<text class="value">{{item.time}}</text>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<text class="key">出门时间：</text>
|
||||
<text class="value">{{item.time}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Record',
|
||||
data() {
|
||||
return {
|
||||
statusDict: {
|
||||
0: {
|
||||
name: '正常',
|
||||
color1: '#39DAAA',
|
||||
color2: '#02C489'
|
||||
},
|
||||
1: {
|
||||
name: '异常',
|
||||
color1: '#FD934E',
|
||||
color2: '#FF7442'
|
||||
},
|
||||
|
||||
},
|
||||
date: new Date().getTime(),
|
||||
showDatePicker: false,
|
||||
recordList: [{
|
||||
name: '张十八',
|
||||
age: '23',
|
||||
phone: '18212341234',
|
||||
idCard: '342922199904664352',
|
||||
time: '12:32:43',
|
||||
status: 0,
|
||||
|
||||
}, {
|
||||
name: '张十九',
|
||||
age: '23',
|
||||
phone: '18212341234',
|
||||
idCard: '342922199904664352',
|
||||
time: '12:32:43',
|
||||
status: 1,
|
||||
}, {
|
||||
name: '张三十七',
|
||||
age: '23',
|
||||
phone: '18212341234',
|
||||
idCard: '342922199904664352',
|
||||
time: '12:32:43',
|
||||
status: 0,
|
||||
}, {
|
||||
name: '张五十六',
|
||||
age: '23',
|
||||
phone: '18212341234',
|
||||
idCard: '342922199904664352',
|
||||
time: '12:32:43',
|
||||
status: 1,
|
||||
}, {
|
||||
name: '张九十三',
|
||||
age: '23',
|
||||
phone: '18212341234',
|
||||
idCard: '342922199904664352',
|
||||
time: '12:32:43',
|
||||
status: 0,
|
||||
}, ]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirmDatePicker(date) {
|
||||
this.showDatePicker = false
|
||||
// this.date = date.value
|
||||
},
|
||||
dateChanged(date) {
|
||||
console.log(date);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.date-picker-btn {
|
||||
width: 300rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 20rpx;
|
||||
border: 1px solid #ccc;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.record-list {
|
||||
padding: 0 20rpx 20rpx;
|
||||
|
||||
.record-item {
|
||||
position: relative;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.record-status {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 112rpx;
|
||||
height: 48rpx;
|
||||
background-image: linear-gradient(219deg, #FD934E 0%, #FF7442 99%);
|
||||
border-radius: 0 8rpx 0 32rpx;
|
||||
|
||||
text {
|
||||
font-size: 12rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
width: 164rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-left: 20rpx;
|
||||
|
||||
.desc-item {
|
||||
.key {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24rpx;
|
||||
color: #8F959E;
|
||||
line-height: 28rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
line-height: 28rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
187
pages/attendance/attendance_detail/record/record.vue
Normal file
187
pages/attendance/attendance_detail/record/record.vue
Normal file
@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-datetime-picker :show="showDatePicker" v-model="date" mode="date" @cancel="showDatePicker=false"
|
||||
@confirm="showDatePicker=false" @change="dateChanged">
|
||||
</u-datetime-picker>
|
||||
<view class="date-picker-btn" @tap="showDatePicker=true">
|
||||
{{new Date(date).getFullYear()}}-{{new Date(date).getMonth()+1}}-{{new Date(date).getDate()}}
|
||||
<u-icon name="calendar" color="#2979ff" size="24"></u-icon>
|
||||
</view>
|
||||
<view class="record-list">
|
||||
<view class="record-item" v-for="(item ,index) in recordList" :key="index">
|
||||
<view class="record-status"
|
||||
:style="`background-image: linear-gradient(219deg, ${statusDict[item.status].color1} 0%, ${statusDict[item.status].color2} 99%)`">
|
||||
<text>{{statusDict[item.status].name}}</text>
|
||||
</view>
|
||||
<image class="photo" src="../../../../attendance_photo_example.png" mode=""></image>
|
||||
<view class="desc">
|
||||
<view class="desc-item">
|
||||
<text class="key">姓名：</text>
|
||||
<text class="value">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<text class="key">年龄：</text>
|
||||
<text class="value">{{item.age}}</text>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<text class="key">联系方式：</text>
|
||||
<text class="value">{{item.phone}}</text>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<text class="key">身份证号：</text>
|
||||
<text class="value">{{item.idCard}}</text>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<text class="key">打卡时间：</text>
|
||||
<text class="value">{{item.time}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Record',
|
||||
data() {
|
||||
return {
|
||||
statusDict: {
|
||||
0: {
|
||||
name: '正常',
|
||||
color1: '#39DAAA',
|
||||
color2: '#02C489'
|
||||
},
|
||||
1: {
|
||||
name: '异常',
|
||||
color1: '#FD934E',
|
||||
color2: '#FF7442'
|
||||
},
|
||||
|
||||
},
|
||||
date: new Date().getTime(),
|
||||
showDatePicker: false,
|
||||
recordList: [{
|
||||
name: '张三',
|
||||
age: '23',
|
||||
phone: '18212341234',
|
||||
idCard: '342922199904664352',
|
||||
time: '2020-12-43 12:32:43',
|
||||
status: 0,
|
||||
|
||||
}, {
|
||||
name: '张四',
|
||||
age: '23',
|
||||
phone: '18212341234',
|
||||
idCard: '342922199904664352',
|
||||
time: '2020-12-43 12:32:43',
|
||||
status: 1,
|
||||
}, {
|
||||
name: '张七',
|
||||
age: '23',
|
||||
phone: '18212341234',
|
||||
idCard: '342922199904664352',
|
||||
time: '2020-12-43 12:32:43',
|
||||
status: 0,
|
||||
}, {
|
||||
name: '张十一',
|
||||
age: '23',
|
||||
phone: '18212341234',
|
||||
idCard: '342922199904664352',
|
||||
time: '2020-12-43 12:32:43',
|
||||
status: 1,
|
||||
}, {
|
||||
name: '张十八',
|
||||
age: '23',
|
||||
phone: '18212341234',
|
||||
idCard: '342922199904664352',
|
||||
time: '2020-12-43 12:32:43',
|
||||
status: 0,
|
||||
}, ]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirmDatePicker(date) {
|
||||
this.showDatePicker = false
|
||||
// this.date = date.value
|
||||
},
|
||||
dateChanged(date) {
|
||||
console.log(date);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.date-picker-btn {
|
||||
width: 300rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 20rpx;
|
||||
border: 1px solid #ccc;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.record-list {
|
||||
padding: 0 20rpx 20rpx;
|
||||
|
||||
.record-item {
|
||||
position: relative;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8rpx;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.record-status {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 112rpx;
|
||||
height: 48rpx;
|
||||
background-image: linear-gradient(219deg, #FD934E 0%, #FF7442 99%);
|
||||
border-radius: 0 8rpx 0 32rpx;
|
||||
|
||||
text {
|
||||
font-size: 12rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
width: 164rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-left: 20rpx;
|
||||
|
||||
.desc-item {
|
||||
.key {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24rpx;
|
||||
color: #8F959E;
|
||||
line-height: 28rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
line-height: 28rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
160
pages/attendance/attendance_detail/statistics/statistics.vue
Normal file
160
pages/attendance/attendance_detail/statistics/statistics.vue
Normal file
@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="tabs">
|
||||
<view :class="`tab-item ${type==0?'active':''}`" @tap="switchTab(0)">日</view>
|
||||
<view :class="`tab-item ${type==1?'active':''}`" @tap="switchTab(1)">周</view>
|
||||
<view :class="`tab-item ${type==2?'active':''}`" @tap="switchTab(2)">月</view>
|
||||
</view>
|
||||
<view class="sizedbox" style="height: 60rpx;"></view>
|
||||
<view class="attendance-list">
|
||||
<view class="attendance-item" v-for="(item ,index) in statisticsList" :key="index">
|
||||
<view class="time" v-if="type==0">
|
||||
20220708
|
||||
</view>
|
||||
<view class="time" v-if="type==1">
|
||||
2022七月第一周
|
||||
</view>
|
||||
<view class="time" v-if="type==2">
|
||||
2022年1月
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<view class="key">应出勤人数：</view>
|
||||
<view class="value">{{item.should}}</view>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<view class="key">实际出勤人数：</view>
|
||||
<view class="value">{{item.actu}}</view>
|
||||
</view>
|
||||
<view class="desc-item">
|
||||
<view class="key">出勤率：</view>
|
||||
<view class="value">{{item.ratio}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
type: 0, // 0：日，1：周，2：月
|
||||
statisticsList: [{
|
||||
should: 345,
|
||||
actu: 340,
|
||||
ratio: 80,
|
||||
time: 1663140428270
|
||||
}, {
|
||||
should: 345,
|
||||
actu: 340,
|
||||
ratio: 80,
|
||||
time: 1663140428270
|
||||
}, {
|
||||
should: 345,
|
||||
actu: 340,
|
||||
ratio: 80,
|
||||
time: 1663140428270
|
||||
}, {
|
||||
should: 345,
|
||||
actu: 340,
|
||||
ratio: 80,
|
||||
time: 1663140428270
|
||||
}, {
|
||||
should: 345,
|
||||
actu: 340,
|
||||
ratio: 80,
|
||||
time: 1663140428270
|
||||
}, {
|
||||
should: 345,
|
||||
actu: 340,
|
||||
ratio: 80,
|
||||
time: 1663140428270
|
||||
}, {
|
||||
should: 345,
|
||||
actu: 340,
|
||||
ratio: 80,
|
||||
time: 1663140428270
|
||||
}, {
|
||||
should: 345,
|
||||
actu: 340,
|
||||
ratio: 80,
|
||||
time: 1663140428270
|
||||
}, ]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switchTab(index) {
|
||||
this.type = index
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tabs {
|
||||
position: fixed;
|
||||
width: 750rpx;
|
||||
box-sizing: border-box;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 200rpx 0;
|
||||
align-items: center;
|
||||
height: 60rpx;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
.tab-item {
|
||||
font-size: 28rpx;
|
||||
color: #8F959E;
|
||||
font-weight: 400;
|
||||
|
||||
&.active {
|
||||
color: #0F40F5;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.attendance-list {
|
||||
padding: 20rpx;
|
||||
|
||||
.attendance-item {
|
||||
border-radius: 8rpx;
|
||||
padding: 28rpx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
position: relative;
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.desc-item {
|
||||
display: flex;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.key {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 26rpx;
|
||||
color: #8F959E;
|
||||
line-height: 30rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
line-height: 30rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user