|
|
<template>
|
|
|
<view class="page">
|
|
|
<view class="header">
|
|
|
<view class="view-left">
|
|
|
<view class="avatar"></view>
|
|
|
<view class="name-gr">
|
|
|
<view class="name">{{ userInfo ? userInfo.account : '' }}</view>
|
|
|
<view class="title">xxxx考勤组-组长</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- <view class="btn-appl" @click="openPopup">
|
|
|
<view class="icon-appl"></view>
|
|
|
<view>申请</view>
|
|
|
</view> -->
|
|
|
</view>
|
|
|
<!-- <view class="location">
|
|
|
<view class="address">
|
|
|
<view class="text1">江苏省南京市江宁区xx街道600号</view>
|
|
|
</view>
|
|
|
<view class="page-map">
|
|
|
<map
|
|
|
style="width: 100%; height: 379rpx"
|
|
|
:latitude="latitude"
|
|
|
:longitude="longitude"
|
|
|
:markers="markers"
|
|
|
:circles="circles"
|
|
|
min-scale="3"
|
|
|
max-scale="20"
|
|
|
:enable-zoom="true"
|
|
|
@markertap="markerTap"
|
|
|
>
|
|
|
</map>
|
|
|
</view>
|
|
|
</view> -->
|
|
|
<view class="content">
|
|
|
<view class="notice">今日排班：张安</view>
|
|
|
<view class="block">
|
|
|
<view class="box">
|
|
|
<view class="text1">上班 {{ shangbanTime }} </view>
|
|
|
<view class="text2">
|
|
|
<view v-if="shangbanTime" class="yidaka">
|
|
|
<view class="icon-tickb"></view>
|
|
|
<text class="subtext1">{{ shangbanTime }}已打卡</text>
|
|
|
<!-- <text class="subtext2" @click="upDakaTime(1)">更新打卡</text> -->
|
|
|
</view>
|
|
|
<text v-else class="subtext1">未打卡</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="box">
|
|
|
<view class="text1">下班 {{ xiabanTime }}</view>
|
|
|
<view class="text2">
|
|
|
<view v-if="xiabanTime" class="yidaka">
|
|
|
<view class="icon-tickb"></view>
|
|
|
<text class="subtext1">{{ xiabanTime }}已打卡</text>
|
|
|
<!-- <text class="subtext2" @click="upDakaTime(2)">更新打卡</text> -->
|
|
|
</view>
|
|
|
<text v-else class="subtext1">未打卡</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="btn-call" :class="clockStatu == 2 ? 'call-hui':''" @click="daka">
|
|
|
<view class="text1">{{ clockStatu == 0 ? "上班打卡" : clockStatu == 1 ? "下班打卡" : clockStatu == 2 ? '全勤':'' }}</view>
|
|
|
<view class="text2">{{ currentTime }}</view>
|
|
|
</view>
|
|
|
<view class="address">
|
|
|
<view class="icon-tick"></view>
|
|
|
<view>{{ isJudgmentPosition ? "已进入考勤范围" : "未在考勤范围" }}：{{ Address.province + Address.city + Address.district + Address.street + Address.streetNum + Address.poiName }}</view>
|
|
|
</view>
|
|
|
<view class="page-map">
|
|
|
<map
|
|
|
style="width: 100%; height: 379rpx"
|
|
|
:latitude="latitude"
|
|
|
:longitude="longitude"
|
|
|
:markers="markers"
|
|
|
:circles="circles"
|
|
|
min-scale="3"
|
|
|
max-scale="20"
|
|
|
:enable-zoom="true"
|
|
|
@markertap="markerTap"
|
|
|
>
|
|
|
</map>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<uni-popup ref="popups" background-color="#fff">
|
|
|
<view class="popup-box">
|
|
|
<view class="popup-header">
|
|
|
<view @click="closePopup">取消</view>
|
|
|
<view @click="confirmPopup">确定</view>
|
|
|
</view>
|
|
|
<view class="popup-content">
|
|
|
<view
|
|
|
class="btn"
|
|
|
@click="goPath('/subcontract/work/attence/leaveappli')"
|
|
|
>
|
|
|
<view class="icon-work"></view>
|
|
|
<text class="btn-text">加班申请</text>
|
|
|
</view>
|
|
|
<view
|
|
|
class="btn"
|
|
|
@click="goPath('/subcontract/work/attence/leaveappli')"
|
|
|
>
|
|
|
<view class="icon-holiday"></view>
|
|
|
<text class="btn-text">请假申请</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { clock, getStatus, judgmentPosition } from "@/api/jn/clock.js"
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
id: 0, // 使用 marker点击事件 需要填写id
|
|
|
title: "map",
|
|
|
latitude: 39.909,
|
|
|
longitude: 116.39742,
|
|
|
currentTime:'',
|
|
|
clockStatu:0,
|
|
|
dakashangTime: null,
|
|
|
dakaxiaTime: null,
|
|
|
shangbanTime:null,
|
|
|
xiabanTime:null,
|
|
|
Slat: "",
|
|
|
Slng: "",
|
|
|
myAddress:{
|
|
|
province:"",
|
|
|
city:"",
|
|
|
district:"",
|
|
|
street:"",
|
|
|
streetNum:"",
|
|
|
poiName:"",
|
|
|
},
|
|
|
markers: [
|
|
|
{
|
|
|
id: 1,
|
|
|
latitude: 39.909,
|
|
|
longitude: 116.39742,
|
|
|
iconPath: "/static/images/umale/icon-pointb.png",
|
|
|
width: 40,
|
|
|
height: 35,
|
|
|
},
|
|
|
],
|
|
|
circles: [
|
|
|
{
|
|
|
latitude: 39.909,
|
|
|
longitude: 116.39742,
|
|
|
color: "#367BEF",
|
|
|
// 填充颜色
|
|
|
fillColor: "#367BEF3A",
|
|
|
// 圆半径
|
|
|
radius: 150,
|
|
|
// 边
|
|
|
strokeWidth: 1,
|
|
|
},
|
|
|
],
|
|
|
userInfo:null,
|
|
|
isJudgmentPosition:false
|
|
|
};
|
|
|
},
|
|
|
props:['lat','lng','Address'],
|
|
|
watch:{
|
|
|
lat:{
|
|
|
handler(lat){
|
|
|
if(lat){
|
|
|
this.Slat = lat;
|
|
|
this.Slng = this.lng;
|
|
|
this.latitude = lat;
|
|
|
this.longitude = this.lng;
|
|
|
this.markers[0].latitude = lat;
|
|
|
this.markers[0].longitude = this.lng;
|
|
|
this.circles[0].latitude = lat;
|
|
|
this.circles[0].longitude = this.lng;
|
|
|
}
|
|
|
},
|
|
|
immediate:true
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
goPath(url) {
|
|
|
this.$tab.navigateTo(url);
|
|
|
},
|
|
|
openPopup() {
|
|
|
this.$refs.popups.open("bottom");
|
|
|
},
|
|
|
confirmPopup() {
|
|
|
this.$refs.popups.close();
|
|
|
},
|
|
|
closePopup() {
|
|
|
this.$refs.popups.close();
|
|
|
},
|
|
|
// upDakaTime(id){
|
|
|
// if(id == 1) {
|
|
|
// this.shangbanTime = this.getCurrentTime(2)
|
|
|
// } else {
|
|
|
// this.xiabanTime = this.getCurrentTime(2)
|
|
|
// }
|
|
|
// },
|
|
|
daka(){
|
|
|
// console.log(this.clockStatu);
|
|
|
if(this.clockStatu == 2) return
|
|
|
let data = {userId:this.userInfo.userId,latitude:this.Slat+'',longitude:this.Slng+''}
|
|
|
// let data = {userId:"21",latitude:'31.254467273803005',longitude:'120.73506295681001'}
|
|
|
// console.log("data",JSON.stringify(data));
|
|
|
clock(data).then(res=>{
|
|
|
// console.log("resdaka",JSON.stringify(res));
|
|
|
if(res.code == 200) {
|
|
|
this.getClockStatus()
|
|
|
}
|
|
|
}).catch(err=>{
|
|
|
uni.showToast({
|
|
|
title: err,
|
|
|
icon:'none'
|
|
|
});
|
|
|
})
|
|
|
},
|
|
|
getCurrentTime() {
|
|
|
const now = new Date();
|
|
|
const hours = this.formatNumber(now.getHours());
|
|
|
const minutes = this.formatNumber(now.getMinutes());
|
|
|
const seconds = this.formatNumber(now.getSeconds());
|
|
|
return `${hours}:${minutes}:${seconds}`;
|
|
|
},
|
|
|
formatNumber(value) {
|
|
|
return value < 10 ? `0${value}` : value;
|
|
|
},
|
|
|
getClockStatus(){
|
|
|
getStatus({userId:this.userInfo.userId}).then(res=>{
|
|
|
console.log("res",JSON.stringify(res));
|
|
|
if(res.code == 200){
|
|
|
this.clockStatu = res.data.status;
|
|
|
if(res.data.status == 1) {
|
|
|
this.shangbanTime = res.data.begainTime.split(' ')[1];
|
|
|
} else if(res.data.status == 2) {
|
|
|
this.shangbanTime = res.data.begainTime.split(' ')[1];
|
|
|
this.xiabanTime = res.data.endTime.split(' ')[1];
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
markerTap(){}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.userInfo = uni.getStorageSync("userInfo")
|
|
|
console.log(JSON.stringify(this.userInfo),"userInfo基本信息");
|
|
|
this.getClockStatus()
|
|
|
judgmentPosition({userId:this.userInfo.userId,latitude:this.Slat+'',longitude:this.Slng+''}).then(res=>{
|
|
|
if(res.code == 200 && res.data){
|
|
|
this.isJudgmentPosition = true;
|
|
|
} else {
|
|
|
this.isJudgmentPosition = false;
|
|
|
}
|
|
|
})
|
|
|
// this.$nextTick(()=>{
|
|
|
// this.markers.latitude = this.Slat
|
|
|
// this.markers.longitude = this.Slng
|
|
|
// this.circles.latitude = this.Slat
|
|
|
// this.circles.longitude = this.Slng
|
|
|
// })
|
|
|
setInterval(() => {
|
|
|
this.currentTime = this.getCurrentTime();
|
|
|
}, 1000);
|
|
|
},
|
|
|
destroyed() {
|
|
|
// this.dakashangTime = null;
|
|
|
// this.dakaxiaTime = null;
|
|
|
// this.shangbanTime = "";
|
|
|
// this.xiabanTime = "";
|
|
|
// console.log("销毁");
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.page {
|
|
|
padding-bottom: 150rpx;
|
|
|
.popup-box {
|
|
|
.popup-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
padding: 34rpx 32rpx;
|
|
|
border-bottom: 1rpx solid #dce3ec;
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
font-family: PingFang SC;
|
|
|
color: #3976f1;
|
|
|
}
|
|
|
|
|
|
.popup-content {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
padding: 106rpx 0 157rpx 0;
|
|
|
|
|
|
.btn {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
|
|
|
.icon-work {
|
|
|
width: 138rpx;
|
|
|
height: 138rpx;
|
|
|
background-size: 100%;
|
|
|
background-image: url("@/static/images/umale/icon-work.png");
|
|
|
background-repeat: no-repeat;
|
|
|
}
|
|
|
|
|
|
.icon-holiday {
|
|
|
width: 138rpx;
|
|
|
height: 138rpx;
|
|
|
background-size: 100%;
|
|
|
background-image: url("@/static/images/umale/icon-holiday.png");
|
|
|
background-repeat: no-repeat;
|
|
|
}
|
|
|
.btn-text {
|
|
|
margin-top: 32rpx;
|
|
|
font-size: 32rpx;
|
|
|
font-family: PingFang SC;
|
|
|
line-height: 48rpx;
|
|
|
color: #34373b;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.header {
|
|
|
display: flex;
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
|
|
|
border-radius: 16rpx;
|
|
|
padding: 36rpx;
|
|
|
margin: 20rpx;
|
|
|
justify-content: space-between;
|
|
|
|
|
|
.view-left {
|
|
|
display: flex;
|
|
|
.avatar {
|
|
|
width: 88rpx;
|
|
|
height: 88rpx;
|
|
|
background-size: 100%;
|
|
|
background-image: url("@/static/images/umale/icon-head.png");
|
|
|
background-repeat: no-repeat;
|
|
|
}
|
|
|
|
|
|
.name-gr {
|
|
|
margin-left: 48rpx;
|
|
|
.name {
|
|
|
font-size: 40rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: bold;
|
|
|
color: #2e2f31;
|
|
|
}
|
|
|
.title {
|
|
|
font-size: 28rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 400;
|
|
|
color: #9da2ab;
|
|
|
letter-spacing: 5rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.btn-appl {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
padding: 0 14rpx;
|
|
|
.icon-appl {
|
|
|
width: 44rpx;
|
|
|
height: 44rpx;
|
|
|
background-size: 100%;
|
|
|
background-image: url("@/static/images/umale/icon-appl.png");
|
|
|
background-repeat: no-repeat;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.location {
|
|
|
margin: 20rpx;
|
|
|
padding: 20rpx;
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
|
|
|
border-radius: 16rpx;
|
|
|
.address {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: 22rpx;
|
|
|
.text1 {
|
|
|
font-size: 32rpx;
|
|
|
font-family: PingFang SC;
|
|
|
// font-weight: bold;
|
|
|
color: #2e2f31;
|
|
|
}
|
|
|
|
|
|
.text2 {
|
|
|
font-size: 24rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 400;
|
|
|
color: #367bef;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
|
|
|
border-radius: 16rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
padding: 26rpx 30rpx 197rpx 30rpx;
|
|
|
margin: 30rpx 20rpx;
|
|
|
|
|
|
.notice {
|
|
|
text-align: center;
|
|
|
font-size: 32rpx;
|
|
|
font-family: PingFang SC;
|
|
|
// font-weight: bold;
|
|
|
color: #2e2f31;
|
|
|
letter-spacing: 4rpx;
|
|
|
}
|
|
|
|
|
|
.block {
|
|
|
display: flex;
|
|
|
margin-top: 22rpx;
|
|
|
.box {
|
|
|
flex: 1;
|
|
|
min-width: 316rpx;
|
|
|
background: #ededee;
|
|
|
border-radius: 8rpx;
|
|
|
padding: 16rpx 20rpx;
|
|
|
margin: 0 8rpx;
|
|
|
|
|
|
.text1 {
|
|
|
font-size: 32rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: bold;
|
|
|
color: #2e2f31;
|
|
|
letter-spacing: 4rpx;
|
|
|
}
|
|
|
|
|
|
.text2 {
|
|
|
display: flex;
|
|
|
white-space: nowrap;
|
|
|
align-items: center;
|
|
|
margin-top: 10rpx;
|
|
|
.yidaka {
|
|
|
display: flex;
|
|
|
white-space: nowrap;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.icon-tickb {
|
|
|
width: 28rpx;
|
|
|
height: 28rpx;
|
|
|
background-size: 100%;
|
|
|
background-image: url("@/static/images/umale/icon-tickb.png");
|
|
|
background-repeat: no-repeat;
|
|
|
margin-right: 15rpx;
|
|
|
}
|
|
|
.subtext1 {
|
|
|
font-size: 24rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 400;
|
|
|
color: #9da2ab;
|
|
|
margin-right: 15rpx;
|
|
|
}
|
|
|
.subtext2 {
|
|
|
font-size: 24rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 400;
|
|
|
color: #367bef;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.btn-call {
|
|
|
width: 298rpx;
|
|
|
height: 298rpx;
|
|
|
background: linear-gradient(180deg, #5792f6 0%, #367bef 100%);
|
|
|
box-shadow: 0rpx 0rpx 40rpx rgba(72, 94, 202, 0.5);
|
|
|
border-radius: 50%;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
flex-direction: column;
|
|
|
margin: 218rpx 0 89rpx 0;
|
|
|
.text1 {
|
|
|
font-size: 40rpx;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: bold;
|
|
|
color: #fefeff;
|
|
|
letter-spacing: 10rpx;
|
|
|
}
|
|
|
|
|
|
.text2 {
|
|
|
font-size: 32rpx;
|
|
|
font-family: PingFang SC;
|
|
|
// font-weight: bold;
|
|
|
color: #fefeff;
|
|
|
letter-spacing: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.call-hui {
|
|
|
background: linear-gradient(180deg, #cccccc 0%, #bdc3c7 100%);
|
|
|
box-shadow: 0rpx 0rpx 40rpx rgba(72, 94, 202, 0.5);
|
|
|
}
|
|
|
|
|
|
.address {
|
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
|
|
|
|
.icon-tick {
|
|
|
width: 29rpx;
|
|
|
height: 29rpx;
|
|
|
background-size: 100%;
|
|
|
background-image: url("@/static/images/umale/icon-tick.png");
|
|
|
background-repeat: no-repeat;
|
|
|
margin-right: 18rpx;
|
|
|
margin-top: 8rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.page-map {
|
|
|
width: 100%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
