379 lines
9.4 KiB
Vue
379 lines
9.4 KiB
Vue
|
<template>
|
|||
|
|
<view class="fullHeight">
|
|||
|
|
<headers :showBack="true" :themeType="'white'">
|
|||
|
|
<view class="headerName">
|
|||
|
|
移动考勤
|
|||
|
|
</view>
|
|||
|
|
</headers>
|
|||
|
|
<view class="box personInfoBox">
|
|||
|
|
<!-- <image v-if="personDetail.fieldAcquisitionUrl" :src="url_config+'image/'+personDetail.fieldAcquisitionUrl" class="profile_photo"></image> -->
|
|||
|
|
<image src="/static/profile_photo.png" class="profile_photo"></image>
|
|||
|
|
<view class="info">
|
|||
|
|
<view class="personName">
|
|||
|
|
{{realName}}
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="groupName">
|
|||
|
|
木工班组
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="box" :style="{'height':(screenHeight - statusBarHeight - 44 - 105 - 15 - 30)+'px'}">
|
|||
|
|
<view class="top">
|
|||
|
|
<view class="item">
|
|||
|
|
<view class="type">
|
|||
|
|
上班
|
|||
|
|
</view>
|
|||
|
|
<view class="time" v-if="attendenceData.enterTime">
|
|||
|
|
<uni-icons class="backImg" type="checkbox-filled" size="14" color="#5181F6"></uni-icons>
|
|||
|
|
{{enterTime}} 已打卡
|
|||
|
|
</view>
|
|||
|
|
<view class="time" v-else>
|
|||
|
|
未打卡
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<view class="type">
|
|||
|
|
下班
|
|||
|
|
</view>
|
|||
|
|
<view class="time" v-if="attendenceData.outTime">
|
|||
|
|
<uni-icons class="backImg" type="checkbox-filled" size="14" color="#5181F6"></uni-icons>
|
|||
|
|
{{outTime}}已打卡
|
|||
|
|
</view>
|
|||
|
|
<view class="time" v-else>
|
|||
|
|
未打卡
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="bottom">
|
|||
|
|
<view class="">
|
|||
|
|
<view class="circleBox" :class="canClick?'':'grey'" @click="clockIn">
|
|||
|
|
<view class="name">
|
|||
|
|
{{!attendenceData.enterTime?'上班':!attendenceData.outTime?'下班':'更新'}}打卡
|
|||
|
|
</view>
|
|||
|
|
<view class="time">
|
|||
|
|
{{currentTime}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="address" v-if="canClick">
|
|||
|
|
<uni-icons class="backImg" type="checkbox-filled" size="14" color="#0bb44e"></uni-icons>已进入考勤范围：{{electricFence.addr}}
|
|||
|
|
</view>
|
|||
|
|
<view class="address" v-else>
|
|||
|
|
<uni-icons class="backImg" type="location-filled" size="14" color="rgba(38, 45, 71, 0.7)"></uni-icons>未进入考勤区域
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import uniIcons from "@/components/uni-icons/uni-icons.vue"
|
|||
|
|
export default {
|
|||
|
|
components:{uniIcons},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
statusBarHeight:0,
|
|||
|
|
screenHeight:667,
|
|||
|
|
personDetail:{
|
|||
|
|
fieldAcquisitionUrl:''
|
|||
|
|
},
|
|||
|
|
canClick:false,
|
|||
|
|
projectDetail:{},
|
|||
|
|
electricFence:{},
|
|||
|
|
attendenceData:{
|
|||
|
|
enterTime: null,
|
|||
|
|
outTime: null
|
|||
|
|
},
|
|||
|
|
currentTime:'',
|
|||
|
|
photoUrl:'',
|
|||
|
|
timer:null,
|
|||
|
|
realName:'',
|
|||
|
|
phoneClockImageType:0,
|
|||
|
|
faceScore:0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed:{
|
|||
|
|
enterTime:function(){
|
|||
|
|
if(this.attendenceData.enterTime){
|
|||
|
|
var a = this.attendenceData.enterTime.split(' ')[1]
|
|||
|
|
return a
|
|||
|
|
}else{
|
|||
|
|
return null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
outTime:function(){
|
|||
|
|
if(this.attendenceData.outTime){
|
|||
|
|
var a = this.attendenceData.outTime.split(' ')[1]
|
|||
|
|
return a
|
|||
|
|
}else{
|
|||
|
|
return null
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
destroyed() {
|
|||
|
|
clearInterval(this.timer)
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.statusBarHeight=uni.getStorageSync('systemInfo').statusBarHeight
|
|||
|
|
this.screenHeight=uni.getStorageSync('systemInfo').screenHeight
|
|||
|
|
this.projectDetail=JSON.parse(uni.getStorageSync('projectDetail'))
|
|||
|
|
var userInfo=JSON.parse(uni.getStorageSync('userInfo'))
|
|||
|
|
this.workerId = userInfo.workerId
|
|||
|
|
this.realName=userInfo.realName
|
|||
|
|
this.GetLOcation()
|
|||
|
|
this.getAttendenceData()
|
|||
|
|
this.getNowTime()
|
|||
|
|
this.getAttendenceTypeFn()
|
|||
|
|
// this.timer=setInterval(()=>{
|
|||
|
|
// this.getNowTime()
|
|||
|
|
// this.GetLOcation()
|
|||
|
|
// },1000)
|
|||
|
|
},
|
|||
|
|
onShow(){
|
|||
|
|
if(this.phoneClockImageType==1&&this.photoUrl){
|
|||
|
|
this.addPhoneAttendanceFn()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//判断是否需要人脸识别
|
|||
|
|
getAttendenceTypeFn(){
|
|||
|
|
var that = this
|
|||
|
|
this.sendRequest({
|
|||
|
|
url: 'xmgl/projectConfig/getProjectConfigList',
|
|||
|
|
data: {projectSn:this.projectDetail.projectSn},
|
|||
|
|
method: "POST",
|
|||
|
|
success(res){
|
|||
|
|
if(res.result){
|
|||
|
|
that.phoneClockImageType=res.result[0].phoneClockImageType
|
|||
|
|
that.faceScore=res.result[0].faceScore
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 获取当前时间
|
|||
|
|
getNowTime: function () {
|
|||
|
|
let dateTime
|
|||
|
|
// let yy = new Date().getFullYear()
|
|||
|
|
// let mm = new Date().getMonth() + 1
|
|||
|
|
// let dd = new Date().getDate()
|
|||
|
|
let hh = new Date().getHours()
|
|||
|
|
let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes()
|
|||
|
|
:
|
|||
|
|
new Date().getMinutes()
|
|||
|
|
let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds()
|
|||
|
|
:
|
|||
|
|
new Date().getSeconds()
|
|||
|
|
dateTime = hh + ':' + mf + ':' + ss
|
|||
|
|
// dateTime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
|
|||
|
|
// console.log(dateTime)
|
|||
|
|
// return dateTime
|
|||
|
|
this.currentTime=dateTime
|
|||
|
|
},
|
|||
|
|
//获取考勤信息
|
|||
|
|
getAttendenceData(){
|
|||
|
|
var that = this
|
|||
|
|
this.sendRequest({
|
|||
|
|
url: 'xmgl/workerAttendance/getPersonAttendanceTime',
|
|||
|
|
data: {workerId:this.workerId},
|
|||
|
|
method: "POST",
|
|||
|
|
success(res){
|
|||
|
|
console.log('getAttendenceData',res)
|
|||
|
|
that.attendenceData=res.result
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
GetLOcation: function() {
|
|||
|
|
var that = this;
|
|||
|
|
uni.getLocation({
|
|||
|
|
type: 'gcj02',
|
|||
|
|
success: (res) => {
|
|||
|
|
console.log('success',res)
|
|||
|
|
var latitude = parseFloat(res.latitude);
|
|||
|
|
var longitude = parseFloat(res.longitude);
|
|||
|
|
that.isInArea(longitude,latitude)
|
|||
|
|
},
|
|||
|
|
fail(res) {
|
|||
|
|
console.log('fail',res)
|
|||
|
|
// uni.showModal({
|
|||
|
|
// title:'提示',
|
|||
|
|
// content:res.errMsg
|
|||
|
|
// })
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 校验坐标位置是否在考勤区域中
|
|||
|
|
isInArea(longitude,latitude){
|
|||
|
|
var that = this
|
|||
|
|
this.sendRequest({
|
|||
|
|
url: 'xmgl/electricFence/checkLocation',
|
|||
|
|
data: {longitude:longitude,projectSn:this.projectDetail.projectSn,latitude:latitude,workerId:this.workerId},
|
|||
|
|
method: "POST",
|
|||
|
|
hideLoading:true,
|
|||
|
|
success(res){
|
|||
|
|
console.log('isInArea',res)
|
|||
|
|
if(res.result.checkType==0){
|
|||
|
|
console.log('不在考勤范围内')
|
|||
|
|
that.canClick=false
|
|||
|
|
}else{
|
|||
|
|
console.log('在考勤范围内')
|
|||
|
|
that.canClick=true
|
|||
|
|
that.electricFence=res.result.electricFence
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//手机打卡
|
|||
|
|
addPhoneAttendanceFn(){
|
|||
|
|
var that = this
|
|||
|
|
var type = 1
|
|||
|
|
if(this.attendenceData.enterTime){
|
|||
|
|
type=2
|
|||
|
|
}
|
|||
|
|
this.sendRequest({
|
|||
|
|
url: 'xmgl/workerAttendance/addPhoneAttendance',
|
|||
|
|
data: {workerId:this.workerId,photoUrl:this.photoUrl,type:type},
|
|||
|
|
method: "POST",
|
|||
|
|
success(res){
|
|||
|
|
console.log('addPhoneAttendanceFn',res)
|
|||
|
|
that.getAttendenceData()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
clockIn(){
|
|||
|
|
if(!this.canClick){
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if(this.phoneClockImageType){
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:'./faceRecognition?faceScore='+this.faceScore
|
|||
|
|
})
|
|||
|
|
// var that = this
|
|||
|
|
// uni.chooseImage({
|
|||
|
|
// count: 1, //默认9
|
|||
|
|
// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|||
|
|
// sourceType: ['camera'], //从相册选择
|
|||
|
|
// success: function (res) {
|
|||
|
|
// console.log(JSON.stringify(res.tempFilePaths));
|
|||
|
|
// const tempFilePaths = res.tempFilePaths;
|
|||
|
|
// uni.uploadFile({
|
|||
|
|
// url:that.url_config+'upload/image', //post请求的地址
|
|||
|
|
// filePath:tempFilePaths[0],
|
|||
|
|
// name:'files',
|
|||
|
|
// // formData: {
|
|||
|
|
// // 'username': this.userInfo.username //formData是指除了图片以外，额外加的字段
|
|||
|
|
// // },
|
|||
|
|
// success: (uploadFileRes) => {
|
|||
|
|
// //这里要注意，uploadFileRes.data是个String类型，要转对象的话需要JSON.parse一下
|
|||
|
|
// var obj = JSON.parse(uploadFileRes.data);
|
|||
|
|
// console.log('obj',obj)
|
|||
|
|
// that.photoUrl=obj.data[0].imageUrl
|
|||
|
|
// that.addPhoneAttendanceFn()
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
}else{
|
|||
|
|
this.addPhoneAttendanceFn()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.profile_photo{
|
|||
|
|
width: 45px;
|
|||
|
|
height: 45px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
}
|
|||
|
|
.box{
|
|||
|
|
box-shadow: 0 4px 24px 0px rgba(212, 220, 236, 0.69);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
margin: 15px;
|
|||
|
|
padding: 15px;
|
|||
|
|
}
|
|||
|
|
.personInfoBox{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-direction: row;
|
|||
|
|
.personName{
|
|||
|
|
color: rgba(72, 141, 236, 1);
|
|||
|
|
font-size: 17px;
|
|||
|
|
}
|
|||
|
|
.groupName{
|
|||
|
|
color: rgba(42, 43, 91, 0.8);
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.top{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-direction: row;
|
|||
|
|
.item{
|
|||
|
|
background-color: #f3f4f8;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
padding: 8px 12px;
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: 15px;
|
|||
|
|
// width: calc(50% - 29px);
|
|||
|
|
// display: inline-flex;
|
|||
|
|
&:first-child{
|
|||
|
|
margin-right: 10px;
|
|||
|
|
}
|
|||
|
|
.time{
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: rgba(38,45,71,0.7);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 3px;
|
|||
|
|
flex-direction: row;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.backImg{
|
|||
|
|
margin-right: 3px;
|
|||
|
|
}
|
|||
|
|
.bottom{
|
|||
|
|
text-align: center;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
height: calc(100% - 60px);
|
|||
|
|
|
|||
|
|
.address{
|
|||
|
|
font-size: 13px;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
color: rgba(38,45,71,0.7);
|
|||
|
|
flex-direction: row;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.circleBox{
|
|||
|
|
width: 140px;
|
|||
|
|
height: 140px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-image: linear-gradient(#0093f9,#066af8);
|
|||
|
|
color: white;
|
|||
|
|
display: inline-block;
|
|||
|
|
box-shadow: 0 4px 24px 0px rgba(81,129,246,0.5);
|
|||
|
|
&.grey{
|
|||
|
|
background-image: linear-gradient(#f1f1f1,#c3c3c3);
|
|||
|
|
box-shadow: 0 4px 24px 0px rgba(195,195,195,0.5);
|
|||
|
|
}
|
|||
|
|
.name{
|
|||
|
|
padding-top: 45px;
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
.time{
|
|||
|
|
font-size: 15px;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|