You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

536 lines
14 KiB

10 months ago
<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>