437 lines
13 KiB
Vue
437 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<Navbar title="考勤打卡" :showBack="false" />
|
|||
|
|
<div class="content">
|
|||
|
|
<ProSelect v-if="this.userType != '00'" @selectPro="selectPro" />
|
|||
|
|
<u-row :gutter="20">
|
|||
|
|
<u-col span="12">
|
|||
|
|
<div class="top-cont">
|
|||
|
|
<div class="name">{{ name }}</div>
|
|||
|
|
<div class="calendar" @click="handleCalendar">
|
|||
|
|
<u-icon name="calendar" color="#2979ff" size="21"></u-icon>
|
|||
|
|
<span>{{ isShow ? '考勤统计' : '考勤打卡' }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</u-col>
|
|||
|
|
</u-row>
|
|||
|
|
<div v-if="isShow">
|
|||
|
|
<u-row :gutter="20" justify="center">
|
|||
|
|
<u-col span="6">
|
|||
|
|
<div class="col-item">
|
|||
|
|
<div>上班 {{ attendanceTime }}</div>
|
|||
|
|
<div class="time" v-if="clockIn">
|
|||
|
|
<u-icon name="checkmark-circle-fill" color="#2979ff" style="margin-right: 6px"></u-icon>
|
|||
|
|
{{ clockIn }}
|
|||
|
|
</div>
|
|||
|
|
<div class="time" v-else>未打卡</div>
|
|||
|
|
</div>
|
|||
|
|
</u-col>
|
|||
|
|
<u-col span="6">
|
|||
|
|
<div class="col-item">
|
|||
|
|
<div>下班 {{ arriveTime }}</div>
|
|||
|
|
<div class="time" v-if="clockOut">
|
|||
|
|
<u-icon name="checkmark-circle-fill" color="#2979ff" style="margin-right: 6px"></u-icon>
|
|||
|
|
{{ clockOut }}
|
|||
|
|
</div>
|
|||
|
|
<div class="time" v-else>未打卡</div>
|
|||
|
|
</div>
|
|||
|
|
</u-col>
|
|||
|
|
</u-row>
|
|||
|
|
|
|||
|
|
<div class="clock-in-item" :class="{ isInLocation: isInLocation }" @click="isConfirm">
|
|||
|
|
<div v-if="isInLocation">考勤打卡</div>
|
|||
|
|
<div v-else>不在打卡范围内</div>
|
|||
|
|
<div class="now-time">{{ nowTime }}</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="location">
|
|||
|
|
<u-icon name="map"></u-icon>
|
|||
|
|
{{ locationSuccess ? location : '获取位置失败, 请开启系统权限后再尝试' }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-else>
|
|||
|
|
<ren-calendar ref="ren" :markDays="markDays" @onDayClick="onDayClick"></ren-calendar>
|
|||
|
|
|
|||
|
|
<div style="margin: 20px 0; display: flex">
|
|||
|
|
上班打卡：{{ clockIn }}
|
|||
|
|
<u-text v-if="!clockIn && isInClockTime" type="error" text="未打卡"></u-text>
|
|||
|
|
</div>
|
|||
|
|
<div style="display: flex">
|
|||
|
|
下班打卡：{{ clockOut }}
|
|||
|
|
<u-text v-if="!clockOut && isInClockTime" type="error" text="未打卡"></u-text>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<Tabbar />
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
|
|||
|
|
import ProSelect from 'pages/component/Proselect'
|
|||
|
|
import { getAttendanceTime, attendancePunch } from '@/api/checkInAdmin'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
RenCalendar,
|
|||
|
|
ProSelect
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
userId: uni.getStorageSync('userInfo').constructionId,
|
|||
|
|
userType: uni.getStorageSync('userInfo').userType,
|
|||
|
|
proId: '',
|
|||
|
|
isShow: true,
|
|||
|
|
name: uni.getStorageSync('userInfo').nickName,
|
|||
|
|
// type: uni.getStorageSync('phone-platform') == 'ios' ? 'wgs84' : 'gcj02',
|
|||
|
|
attendanceTime: '-', // 上班时间
|
|||
|
|
arriveTime: '-', // 下班时间
|
|||
|
|
// 上班卡时间戳限制 14:00:00前都是上班卡 获取14:00:00前的时间戳
|
|||
|
|
clockInTimeLimit: new Date(new Date().toLocaleDateString()).getTime() + 14 * 60 * 60 * 1000,
|
|||
|
|
// 当前时间的时间戳
|
|||
|
|
nowTimeLimit: new Date().getTime(),
|
|||
|
|
clockIn: '', //上班打卡时间
|
|||
|
|
clockOut: '', //下班打卡时间
|
|||
|
|
clockInStatus: '',
|
|||
|
|
nowTime: '', //当前时间
|
|||
|
|
location: '', //当前位置
|
|||
|
|
isInLocation: false, //是否在打卡范围内
|
|||
|
|
lat: '', //纬度
|
|||
|
|
lon: '', //经度
|
|||
|
|
// 打卡规定地址范围
|
|||
|
|
clockInLocation: [],
|
|||
|
|
clockInDistance: 3000, // 考勤距离
|
|||
|
|
currentId: '',
|
|||
|
|
curDate: '', //当前日期
|
|||
|
|
today: '', //今天日期
|
|||
|
|
isInClockTime: true, // 是否在打卡时间内
|
|||
|
|
markDays: [], //标记日期
|
|||
|
|
// 获取位置成功
|
|||
|
|
locationSuccess: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.getNowTime()
|
|||
|
|
this.getToday()
|
|||
|
|
this.updateNowTime()
|
|||
|
|
this.getLocation()
|
|||
|
|
console.log('时间戳-上班', this.clockInTimeLimit)
|
|||
|
|
console.log('时间戳-当前', this.nowTimeLimit)
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 获取打卡信息
|
|||
|
|
async getAttendanceInfo() {
|
|||
|
|
const params = {
|
|||
|
|
time: this.today,
|
|||
|
|
userId: this.userId,
|
|||
|
|
proId: this.proId
|
|||
|
|
}
|
|||
|
|
console.log('参数', params)
|
|||
|
|
const res = await getAttendanceTime(params)
|
|||
|
|
console.log('getAttendanceTime', res)
|
|||
|
|
if (res.data) {
|
|||
|
|
this.clockInLocation = res.data.addressList || '-'
|
|||
|
|
this.attendanceTime = res.data.upperWorkTime || '-'
|
|||
|
|
this.arriveTime = res.data.belowWorkTime
|
|||
|
|
this.clockIn = res.data.goWorkTime || ''
|
|||
|
|
this.clockOut = res.data.offWorkTime || ''
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.isInClockInLocation()
|
|||
|
|
}, 200)
|
|||
|
|
} else {
|
|||
|
|
this.clockInLocation = []
|
|||
|
|
this.isInLocation = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 选择工程
|
|||
|
|
selectPro(pro) {
|
|||
|
|
console.log('🚀 ~ selectPro ~ 选择工程:', pro)
|
|||
|
|
this.proId = pro.proId
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.getAttendanceInfo()
|
|||
|
|
}, 200)
|
|||
|
|
},
|
|||
|
|
// 获取当前时间
|
|||
|
|
getNowTime() {
|
|||
|
|
const date = new Date()
|
|||
|
|
const hour = String(date.getHours()).padStart(2, '0')
|
|||
|
|
const minute = String(date.getMinutes()).padStart(2, '0')
|
|||
|
|
const second = String(date.getSeconds()).padStart(2, '0')
|
|||
|
|
this.nowTime = `${hour}:${minute}:${second}`
|
|||
|
|
},
|
|||
|
|
// 获取今天日期
|
|||
|
|
getToday() {
|
|||
|
|
const date = new Date()
|
|||
|
|
const year = date.getFullYear()
|
|||
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|||
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|||
|
|
this.today = `${year}-${month}-${day}`
|
|||
|
|
},
|
|||
|
|
// 更新当前时间
|
|||
|
|
updateNowTime() {
|
|||
|
|
setInterval(() => {
|
|||
|
|
this.getNowTime()
|
|||
|
|
}, 1000)
|
|||
|
|
},
|
|||
|
|
// 获取当前位置
|
|||
|
|
getLocation() {
|
|||
|
|
uni.getLocation({
|
|||
|
|
// type: this.type,
|
|||
|
|
type: 'wgs84', // type: wgs84 返回 gps 坐标，gcj02
|
|||
|
|
isHighAccuracy: true,
|
|||
|
|
altitude: true,
|
|||
|
|
success: res => {
|
|||
|
|
this.locationSuccess = true
|
|||
|
|
console.log('getLocation', res)
|
|||
|
|
this.lat = res.latitude
|
|||
|
|
this.lon = res.longitude
|
|||
|
|
// if (res.address) {
|
|||
|
|
// this.location = res.address.province + res.address.city + res.address.district + res.address.street
|
|||
|
|
// }
|
|||
|
|
this.handleLocation()
|
|||
|
|
},
|
|||
|
|
fail: err => {
|
|||
|
|
this.locationSuccess = false
|
|||
|
|
console.log('getLocation', err, this.locationSuccess)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '获取位置失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 处理位置
|
|||
|
|
handleLocation() {
|
|||
|
|
uni.request({
|
|||
|
|
url: `https://api.map.baidu.com/reverse_geocoding/v3/?ak=PM43nB8eDNTBrXkQwGrTQFcmOni3Z9nO&output=json&coordtype=wgs84ll&location=${this.lat},${this.lon}`,
|
|||
|
|
method: 'GET',
|
|||
|
|
success: res => {
|
|||
|
|
console.log('解析的地址', res)
|
|||
|
|
this.location = res.data.result.formatted_address
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 计算 当前位置 是否在clockInLocation[] 中任意一项的打卡范围内 默认范围为 500m
|
|||
|
|
isInClockInLocation() {
|
|||
|
|
if (this.clockInLocation.length == 0) return
|
|||
|
|
this.clockInLocation.forEach(item => {
|
|||
|
|
let distance = this.getDistance(this.lat, this.lon, item.lat, item.lon)
|
|||
|
|
console.log('🚀 ~ isInClockInLocation ~ distance:', distance)
|
|||
|
|
if (this.type == 'gcj02') {
|
|||
|
|
distance = distance - 700
|
|||
|
|
} else {
|
|||
|
|
distance = distance - 1000
|
|||
|
|
}
|
|||
|
|
console.log('🚀 ~ isInClockInLocation ~ distance-计算后:', distance)
|
|||
|
|
if (distance <= this.clockInDistance) {
|
|||
|
|
if (this.distance < 0) this.distance = 0
|
|||
|
|
this.isInLocation = true
|
|||
|
|
this.currentId = item.id
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 计算两点之间的距离
|
|||
|
|
getDistance(lat1, lon1, lat2, lon2) {
|
|||
|
|
const radLat1 = this.deg2rad(lat1)
|
|||
|
|
const radLat2 = this.deg2rad(lat2)
|
|||
|
|
const a = radLat1 - radLat2
|
|||
|
|
const b = this.deg2rad(lon1) - this.deg2rad(lon2)
|
|||
|
|
let s =
|
|||
|
|
2 *
|
|||
|
|
Math.asin(
|
|||
|
|
Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2))
|
|||
|
|
)
|
|||
|
|
s = s * 6378.137 // 地球半径（单位：公里）
|
|||
|
|
s = Math.round(s * 10000) / 10 // 保留一位小数
|
|||
|
|
return s
|
|||
|
|
},
|
|||
|
|
deg2rad(deg) {
|
|||
|
|
return (deg * Math.PI) / 180
|
|||
|
|
},
|
|||
|
|
// 切换考勤打卡和考勤统计
|
|||
|
|
handleCalendar() {
|
|||
|
|
console.log('跳转到考勤统计页面')
|
|||
|
|
this.isShow = !this.isShow
|
|||
|
|
this.getToday()
|
|||
|
|
this.getAttendanceInfo()
|
|||
|
|
if (!this.isShow) {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.markDays = []
|
|||
|
|
let today = this.$refs.ren.getToday().date
|
|||
|
|
this.curDate = today
|
|||
|
|
this.markDays.push(today)
|
|||
|
|
}, 300)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onDayClick(data) {
|
|||
|
|
console.log('🚀 ~ onDayClick ~ data:', data)
|
|||
|
|
if (new Date(data.date).getTime() > new Date().getTime()) {
|
|||
|
|
this.isInClockTime = false
|
|||
|
|
} else {
|
|||
|
|
this.isInClockTime = true
|
|||
|
|
}
|
|||
|
|
this.curDate = data.date
|
|||
|
|
this.today = data.date
|
|||
|
|
this.getAttendanceInfo()
|
|||
|
|
},
|
|||
|
|
// 是否确认打下班卡
|
|||
|
|
parseTime(timeStr) {
|
|||
|
|
const [hours, minutes, seconds] = timeStr.split(':').map(Number)
|
|||
|
|
const date = new Date()
|
|||
|
|
date.setHours(hours, minutes, seconds, 0)
|
|||
|
|
return date
|
|||
|
|
},
|
|||
|
|
isConfirm() {
|
|||
|
|
if (!this.isInLocation) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '不在打卡范围内',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (this.clockIn) {
|
|||
|
|
const now = this.parseTime(this.nowTime)
|
|||
|
|
const clockIn = this.parseTime(this.clockIn)
|
|||
|
|
const sixtyMinutesLater = new Date(clockIn.getTime() + 60 * 60000) // 考勤时间加上 60 分钟
|
|||
|
|
if (now < sixtyMinutesLater) {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '是否确认打下班卡？',
|
|||
|
|
showCancel: true,
|
|||
|
|
cancelText: '取消',
|
|||
|
|
confirmText: '确认',
|
|||
|
|
success: res => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
console.log('用户点击确认')
|
|||
|
|
this.handleClockIn()
|
|||
|
|
} else {
|
|||
|
|
console.log('用户点击取消')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
this.handleClockIn()
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.handleClockIn()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 打卡
|
|||
|
|
async handleClockIn() {
|
|||
|
|
try {
|
|||
|
|
let attendanceType = ''
|
|||
|
|
if (this.nowTimeLimit < this.clockInTimeLimit && !this.clockIn) {
|
|||
|
|
attendanceType = '1'
|
|||
|
|
} else if (this.nowTimeLimit < this.clockInTimeLimit && this.clockIn) {
|
|||
|
|
attendanceType = '2'
|
|||
|
|
} else if (this.nowTimeLimit > this.clockInTimeLimit) {
|
|||
|
|
attendanceType = '2'
|
|||
|
|
}
|
|||
|
|
console.log('打卡')
|
|||
|
|
// 开启loading
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '打卡中...',
|
|||
|
|
icon: 'loading', // loading icon有哪几种: 1. none 2. success 3. loading
|
|||
|
|
mask: true // 是否显示透明蒙层，防止触摸穿透
|
|||
|
|
})
|
|||
|
|
const params = {
|
|||
|
|
userId: this.userId,
|
|||
|
|
proId: this.proId,
|
|||
|
|
attendanceType,
|
|||
|
|
time: this.nowTime,
|
|||
|
|
punchLocation: this.currentId
|
|||
|
|
}
|
|||
|
|
console.log('🚀 ~ 打卡参数 ~ params:', params)
|
|||
|
|
const res = await attendancePunch(params)
|
|||
|
|
console.log('🚀 ~ handleClockIn ~ res:', res)
|
|||
|
|
this.getAttendanceInfo()
|
|||
|
|
uni.hideLoading()
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '打卡成功',
|
|||
|
|
icon: 'success',
|
|||
|
|
duration: 1500
|
|||
|
|
})
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log('🚀 ~ handleClockIn ~ error:', error)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.content {
|
|||
|
|
padding: 0 20px;
|
|||
|
|
white-space: pre-wrap;
|
|||
|
|
word-wrap: break-word;
|
|||
|
|
}
|
|||
|
|
.top-cont {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 15px;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|||
|
|
.name {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 19px;
|
|||
|
|
font-weight: 800;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
.calendar {
|
|||
|
|
font-size: 12px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.col-item {
|
|||
|
|
padding: 10px;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
font-size: 15px;
|
|||
|
|
line-height: 1.8;
|
|||
|
|
color: #333;
|
|||
|
|
.time {
|
|||
|
|
display: flex;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.clock-in-item {
|
|||
|
|
margin: 36% auto 30px;
|
|||
|
|
width: 100px;
|
|||
|
|
height: 100px;
|
|||
|
|
padding: 10px;
|
|||
|
|
background: linear-gradient(135deg, #a4c1fa, #adebe3);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 800;
|
|||
|
|
line-height: 1.8;
|
|||
|
|
color: #fff;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
.now-time {
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
// 不在打卡范围内 背景置灰
|
|||
|
|
&:not(.isInLocation) {
|
|||
|
|
background: #909399;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.location {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
</style>
|