<template>
|
<view class="content">
|
<!-- 自定义顶部导航栏 -->
|
<u-navbar
|
:is-back="true"
|
title="考勤打卡"
|
:background="background"
|
back-icon-color="#FFF"
|
title-color="#FFF"
|
>
|
<view class="navbar-right" slot="right">考勤记录</view>
|
</u-navbar>
|
<view class="clock-time-background"></view>
|
<view class="clock-time">
|
<view class="clock-info">
|
<view class="clock-left">
|
<view class="clock-up-radiu"></view>
|
<view class="clock-line"></view>
|
<view class="clock-down-radiu"></view>
|
</view>
|
<view class="clock-right">
|
<view class="up-time">上班时间: 08:30</view>
|
<view class="clock-btn">
|
<view class="btn1">
|
<view class="btn0">
|
<view class="btn">
|
<view class="btn-title" @click="goClock()">打卡</view>
|
<view class="btn-time">{{nowTime}}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="clock-position-info">
|
<view class="clock-position-box">
|
<view class="clock-position" v-if="isPositionThan==true">
|
<image src="../../static/images/clock/position01.png"/>
|
您已进入考勤范围: {{address}}</view>
|
<view class="clock-position" v-if="isPositionThan==false">
|
<image src="../../static/images/clock/position01.png"/>
|
不在考勤范围: {{address}}</view>
|
</view>
|
</view>
|
|
<view class="down-time">下班时间: 18:00</view>
|
</view>
|
</view>
|
</view>
|
<iframe id="geoPage" width=0 height=0 frameborder=0 style="display:none;" scrolling="no"
|
src="https://apis.map.qq.com/tools/geolocation?key=T7RBZ-62U3X-RSQ4P-ZZVCB-WE7JT-HRBOG&referer=myapp">
|
</iframe>
|
<!-- <web-view :src="urls"></web-view> -->
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
urls: '',
|
nowTime:'',
|
name:'',
|
code:'',
|
jd:'',
|
wd:'',
|
address:'',
|
isPositionThan:false,
|
background:{
|
backgroundColor:"#0BB9C8"
|
}
|
}
|
},
|
mounted() {
|
//获取当前位置信息
|
this.getNowPosition();
|
//获取时钟
|
setInterval(() => {
|
this.nowTime = this.getNowTime(3)
|
}, 1000);
|
},
|
onLoad: function(options) {
|
//获取个人信息
|
this.getOneselfInFo();
|
//long 转换为字符串
|
var code = JSON.stringify(this.$store.state.puserID.toString());
|
this.urls = "http://61.131.136.25:2082/xcxjingqingmap_clock_sign_in/xcxmap.html?snumber="+code;
|
},
|
methods: {
|
//获取当前位置信息
|
getNowPosition(){
|
var that = this;
|
uni.getLocation({
|
type: 'wgs84',
|
geocode:'true',
|
success: function (res) {
|
console.log('当前位置：' + res);
|
//114.921652006005 25.8457176283118
|
// that.jd = '114.921652006005';
|
// that.wd = '25.8457176283118';
|
that.jd = res.longitude;
|
that.wd = res.latitude;
|
//通过经纬度换算详细地址
|
that.getAddress();
|
//位置比对
|
that.positionThan();
|
}
|
});
|
},
|
//返回上一页
|
goBack() {
|
uni.navigateBack({})
|
},
|
//通过经纬度换算详细地址
|
getAddress(){
|
var that = this;
|
uni.request({
|
url: `https://fmap.sf-express.com/rgeo/api`,
|
method: "GET",
|
data:{
|
x: that.jd,
|
y: that.wd,
|
ak: '1986afc8a5744263971b7f2482253dfc'
|
},
|
header:{
|
'Content-type':'application/x-www-form-urlencoded'
|
},
|
success(res) {
|
that.address = res.data.result.pois[0].name
|
}
|
})
|
},
|
//比对考勤位置
|
positionThan(){
|
var that = this;
|
uni.request({
|
url: this.$store.state.piAPI + `/attendance/positionThan`,
|
method: "GET",
|
data:{
|
number: this.code,
|
jd: this.jd,
|
wd: this.wd
|
},
|
header:{
|
'Content-type':'application/x-www-form-urlencoded'
|
},
|
success(resdata) {
|
//不在考勤范围内
|
resdata.data.data==true?that.isPositionThan = true:that.isPositionThan = false;
|
}
|
})
|
},
|
|
//获取个人信息
|
getOneselfInFo() {
|
var that = this;
|
//保安信息查询
|
uni.request({
|
url:that.$store.state.piAPI + '/blade-user/details?id='+this.$store.state.puserID,
|
method:'POST',
|
success(resdata) {
|
that.name = resdata.data.data.realName;
|
that.code = resdata.data.data.code;
|
}
|
})
|
},
|
|
//去打卡
|
goClock() {
|
var that = this;
|
uni.request({
|
url: this.$store.state.piAPI + `/attendance/AppSave`,
|
method: "POST",
|
data:{
|
number: this.code,
|
name: this.name,
|
clockTime: this.getNowTime(1),
|
jd: this.jd,
|
wd: this.wd,
|
address: this.address
|
},
|
header:{
|
'Content-type':'application/x-www-form-urlencoded'
|
},
|
success(resdata) {
|
//不在考勤范围内
|
if (resdata.data.code == 400) {
|
uni.showToast({
|
title: '不在考勤范围,打卡失败!',
|
icon:'none',
|
duration: 2000
|
});
|
}
|
//打卡成功
|
if (resdata.data.code == 200) {
|
uni.showToast({
|
title: '打卡成功!',
|
icon:'success',
|
duration: 2000
|
});
|
}
|
}
|
})
|
},
|
|
//获取当前时间
|
getNowTime(type) {
|
//1、获得当前时间，格式化时间
|
var now = new Date();
|
var year = now.getFullYear();
|
var month = now.getMonth() + 1;
|
if (month < 10) {
|
month = "0" + month;
|
}
|
var date = now.getDate();
|
if (date < 10) {
|
date = "0" + date;
|
}
|
var hour = now.getHours();
|
if (hour < 10) {
|
hour = "0" + hour;
|
}
|
var minute = now.getMinutes();
|
if (minute < 10) {
|
minute = "0" + minute;
|
}
|
var second = now.getSeconds();
|
if (second < 10) {
|
second = "0" + second;
|
}
|
var nowstr = null;
|
if (type == 1) {
|
nowstr = year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
|
}
|
if (type == 2) {
|
nowstr = year + "年" + month + "月" + date + "日 " + hour + ":" + minute + ":" + second;
|
}
|
if (type == 3) {
|
nowstr = hour + ":" + minute + ":" + second;
|
}
|
return nowstr;
|
},
|
},
|
|
}
|
</script>
|
|
<style>
|
page{
|
width: 100%;
|
height: 100%;
|
/* background-color: #FCFBFC; */
|
background-color: #F7f7f7;
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
|
.btn0{
|
width: 6.5rem;
|
height: 6.5rem;
|
// background-image: linear-gradient(to bottom,#C6F1E2,#C6F1E2);
|
background-color: #C6F1E2;
|
border-radius: 100px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.btn1{
|
width: 7rem;
|
height: 7rem;
|
// background-image: linear-gradient(to bottom,#EBF2F0,#EBF2F0);
|
background-color: #EBF2F0;
|
border-radius: 100px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
|
.navbar-right{
|
color: #fff;
|
font-size: 0.7rem;
|
margin-right: 1.5rem;
|
margin-top: 0.2rem;
|
}
|
|
.content{
|
width: 100%;
|
height: 100%;
|
|
.uni-nav-bar-info {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
// background-color:#0078A8;
|
width: 92%;
|
margin: 0 auto;
|
height: 50px;
|
margin-top: 20px;
|
|
.uni-nav-bar-left {
|
width: 15%;
|
display: flex;
|
justify-items: center;
|
|
image {
|
background-color: #00BFFF;
|
width: 1.6rem;
|
height: 1.6rem;
|
}
|
}
|
|
.title {
|
width: 70%;
|
font-weight: 550;
|
letter-spacing: 1px;
|
text-align: center;
|
}
|
|
|
.right {
|
width: 15%;
|
display: flex;
|
justify-items: center;
|
margin-top: 0.2rem;
|
|
.title-right {
|
font-size: 0.8rem;
|
color: #808080;
|
}
|
}
|
|
|
}
|
|
|
.clock-time-background{
|
width: 100%;
|
height: 15rem;
|
// background-color: #F5F5F5;
|
background-color: #F3F3F3;
|
}
|
|
|
.clock-time{
|
width: 100%;
|
height: 20rem;
|
margin-top: -15rem;
|
// background-color: #0078A8;
|
|
.clock-info{
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: row;
|
// margin: 0 auto;
|
|
.clock-left{
|
width: 10%;
|
margin-top: -1rem;
|
margin-left: 8%;
|
display: flex;
|
flex-direction: column;
|
// background-color: #00FFFF;
|
align-items: center;
|
justify-content: center;
|
|
.clock-up-radiu{
|
width: 0.9rem;
|
height: 0.9rem;
|
border-radius: 100px;
|
border: 2px solid #6DC7A9;
|
}
|
|
.clock-line{
|
width: 1.5px;
|
height: 15rem;
|
background-color: #EDEDED;
|
}
|
|
.clock-down-radiu{
|
width: 0.9rem;
|
height: 0.9rem;
|
border-radius: 100px;
|
border: 2px solid #6DC7A9;
|
}
|
|
}
|
|
.clock-right{
|
width: 64%;
|
height: 100%;
|
margin-top: 1rem;
|
display: flex;
|
flex-direction: column;
|
|
.up-time{
|
width: 100%;
|
height: 1.5rem;
|
margin-top: -0.2rem;
|
}
|
|
.clock-btn{
|
width: 100%;
|
height: 9.5rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
// background-color: #007AFF;
|
// margin-left: 5rem;
|
|
|
.btn{
|
width: 6rem;
|
height: 6rem;
|
border-radius: 100px;
|
color: #FFFFFF;
|
background-image: linear-gradient(to bottom,#0FD0E1,#0FD0E1);
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
|
.btn-title{
|
font-size: 1.2rem;
|
}
|
}
|
}
|
|
.clock-position-info{
|
width: 100%;
|
display: flex;
|
// align-items: center;
|
// justify-content: center;
|
text-align: center;
|
}
|
|
.clock-position-box {
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
font-size: 0.8rem;
|
}
|
|
.clock-position{
|
height: 2rem;
|
// float: left;
|
// display: flex;
|
// align-items: center;
|
// justify-content: center;
|
|
image{
|
width: 1.5rem;
|
height: 1.2rem;
|
float: left;
|
// margin-left: 2rem;
|
}
|
|
}
|
|
|
.down-time{
|
height: 7rem;
|
line-height: 7rem;
|
|
// margin-top: 2.3rem;
|
}
|
}
|
}
|
}
|
}
|
|
</style>
|
