|
|
|
|
@ -3,7 +3,7 @@
|
|
|
|
|
<CardContainer>
|
|
|
|
|
<div>
|
|
|
|
|
<button class="sign-btn" @click="clockIn">
|
|
|
|
|
<span>打卡</span>
|
|
|
|
|
<span>{{ isOutSign ? ' 外勤' : '' }}打卡</span>
|
|
|
|
|
</button>
|
|
|
|
|
<div class="sign-info">
|
|
|
|
|
<div class="sign-statue">
|
|
|
|
|
@ -11,32 +11,72 @@
|
|
|
|
|
<div>当前位置： <span v-if="isGetLocation">
|
|
|
|
|
<el-tag size="small" type="primary" effect="dark">{{pos.address}}</el-tag>
|
|
|
|
|
（{{pos.lng}},{{pos.lat}}）</span></div>
|
|
|
|
|
<div>当前距离：{{ nowDistance }}</div>
|
|
|
|
|
<div>最大打卡范围：{{ maxDistance }}</div>
|
|
|
|
|
<div>当前距离：{{ nowDistance }}千米</div>
|
|
|
|
|
<div>最大打卡范围：{{ maxDistance }}千米</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="sign-log">
|
|
|
|
|
|
|
|
|
|
<el-timeline>
|
|
|
|
|
<el-timeline-item
|
|
|
|
|
v-for="(item) in todayAttendance"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
:type="item.sign_at_image ? 'warning' : 'primary'"
|
|
|
|
|
:timestamp="item.sign_at">
|
|
|
|
|
{{ item.sign_at_address }}{{ item.sign_at_image ? '(外勤)' : '' }}
|
|
|
|
|
</el-timeline-item>
|
|
|
|
|
</el-timeline>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<MonthStatics ref="MonthStatics"></MonthStatics>
|
|
|
|
|
<MonthStatics ref="MonthStatics" @today-attendance="e => todayAttendance = e"></MonthStatics>
|
|
|
|
|
</CardContainer>
|
|
|
|
|
|
|
|
|
|
<vxe-modal
|
|
|
|
|
v-model="isShow"
|
|
|
|
|
show-footer
|
|
|
|
|
:z-index="zIndex"
|
|
|
|
|
title="外勤打卡"
|
|
|
|
|
show-confirm-button
|
|
|
|
|
:width="500"
|
|
|
|
|
:height="320"
|
|
|
|
|
esc-closable
|
|
|
|
|
:fullscreen="$store.getters.device === 'mobile'"
|
|
|
|
|
>
|
|
|
|
|
<van-uploader capture="camera" :max-size="20 * 1024 * 1024" preview-size="140px" :max-count="1" v-model="fileList" @delete="imageId = ''"/>
|
|
|
|
|
<p>照片大小不能超过20Mb</p>
|
|
|
|
|
|
|
|
|
|
<template #footer>
|
|
|
|
|
<el-button type="primary" :loading="loading" @click="outClockIn"
|
|
|
|
|
>确认打卡</el-button
|
|
|
|
|
>
|
|
|
|
|
</template>
|
|
|
|
|
</vxe-modal>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { sign, preDistance } from '@/api/attendance'
|
|
|
|
|
import { throttle } from '@/utils'
|
|
|
|
|
import { getToken } from '@/utils/auth'
|
|
|
|
|
import MonthStatics from './components/MonthStatics'
|
|
|
|
|
import axios from "axios";
|
|
|
|
|
import { PopupManager } from "element-ui/lib/utils/popup";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
MonthStatics
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
// start 外勤打卡
|
|
|
|
|
loading: false,
|
|
|
|
|
action: process.env.VUE_APP_UPLOAD_API,
|
|
|
|
|
fileList: [],
|
|
|
|
|
isShow: false,
|
|
|
|
|
zIndex: PopupManager.nextZIndex(),
|
|
|
|
|
imageId: '',
|
|
|
|
|
// end
|
|
|
|
|
isGetLocation: false,
|
|
|
|
|
isOutSign: false,
|
|
|
|
|
pos: {
|
|
|
|
|
@ -46,14 +86,70 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
maxDistance: '',
|
|
|
|
|
nowDistance: '',
|
|
|
|
|
todayAttendance: []
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
isShow(newVal) {
|
|
|
|
|
if(newVal) {
|
|
|
|
|
this.zIndex = PopupManager.nextZIndex()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {},
|
|
|
|
|
methods: {
|
|
|
|
|
uploadFile(file) {
|
|
|
|
|
let data = new FormData()
|
|
|
|
|
data.append('file', file.file)
|
|
|
|
|
|
|
|
|
|
axios.post(this.action, data, {
|
|
|
|
|
'Content-type' : 'multipart/form-data',
|
|
|
|
|
headers: {
|
|
|
|
|
Authorization: `Bearer ${getToken()}`
|
|
|
|
|
}
|
|
|
|
|
}).then(res => {
|
|
|
|
|
console.log(res)
|
|
|
|
|
if(res.status === 200) {
|
|
|
|
|
if(res.data.code) {
|
|
|
|
|
Promise.reject(res.data.msg)
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
this.imageId = res.data.data.id
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
outClockIn: throttle(async function() {
|
|
|
|
|
try {
|
|
|
|
|
this.loading = true
|
|
|
|
|
if(!this.fileList[0]?.file) {
|
|
|
|
|
this.$message.warning('外勤打卡请拍照！')
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
await this.uploadFile(this.fileList[0].file)
|
|
|
|
|
const res = await sign({
|
|
|
|
|
location: `${this.pos.lng},${this.pos.lat}`,
|
|
|
|
|
address: this.pos.address,
|
|
|
|
|
image_id: this.imageId
|
|
|
|
|
})
|
|
|
|
|
this.$message.success('打卡成功')
|
|
|
|
|
this.loading = false
|
|
|
|
|
this.isShow = false
|
|
|
|
|
this.fileList = []
|
|
|
|
|
await this.$refs['MonthStatics'].getData()
|
|
|
|
|
} catch (err) {
|
|
|
|
|
console.error(err)
|
|
|
|
|
this.loading = false
|
|
|
|
|
}
|
|
|
|
|
}, 1000, true),
|
|
|
|
|
clockIn: throttle(async function() {
|
|
|
|
|
try {
|
|
|
|
|
this.getLocation()
|
|
|
|
|
await this.getLocation()
|
|
|
|
|
if(!this.isGetLocation) return
|
|
|
|
|
if(this.isOutSign) {
|
|
|
|
|
this.isShow = true
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
const res = await sign({
|
|
|
|
|
location: `${this.pos.lng},${this.pos.lat}`,
|
|
|
|
|
address: this.pos.address
|
|
|
|
|
@ -89,69 +185,73 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
getLocation() {
|
|
|
|
|
navigator.geolocation.getCurrentPosition((pos) => {
|
|
|
|
|
this.isGetLocation = true
|
|
|
|
|
console.log('经度', pos.coords.latitude);
|
|
|
|
|
console.log('纬度', pos.coords.longitude);
|
|
|
|
|
this.pos.lng = pos.coords.longitude
|
|
|
|
|
this.pos.lat = pos.coords.latitude
|
|
|
|
|
if(this.pos.lat && this.pos.lng && this.isGetLocation) {
|
|
|
|
|
this.pos2Address(this.pos.lat, this.pos.lng)
|
|
|
|
|
preDistance({
|
|
|
|
|
location: `${this.pos.lng},${this.pos.lat}`
|
|
|
|
|
}).then(res => {
|
|
|
|
|
this.isOutSign = res.distance > Number(res.max_distance)
|
|
|
|
|
this.maxDistance = res.max_distance
|
|
|
|
|
this.nowDistance = res.distance
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}, (error) => {
|
|
|
|
|
console.log(error)
|
|
|
|
|
if (error.code) {
|
|
|
|
|
switch (error.code) {
|
|
|
|
|
case error.PERMISSION_DENIED:
|
|
|
|
|
this.$msgbox.confirm("需授权定位后进行打卡", "提示",{
|
|
|
|
|
confirmButtonText: '重试'
|
|
|
|
|
}).then(_ => {
|
|
|
|
|
this.getLocation()
|
|
|
|
|
})
|
|
|
|
|
this.isGetLocation = false
|
|
|
|
|
break;
|
|
|
|
|
case error.POSITION_UNAVAILABLE:
|
|
|
|
|
this.$msgbox.confirm("无法获取当前位置，请重试", "提示",{
|
|
|
|
|
confirmButtonText: '重试'
|
|
|
|
|
}).then(_ => {
|
|
|
|
|
this.getLocation()
|
|
|
|
|
})
|
|
|
|
|
this.isGetLocation = false
|
|
|
|
|
break;
|
|
|
|
|
case error.TIMEOUT:
|
|
|
|
|
this.$msgbox.confirm("获取位置超时，请重试", "提示",{
|
|
|
|
|
confirmButtonText: '重试'
|
|
|
|
|
}).then(_ => {
|
|
|
|
|
this.getLocation()
|
|
|
|
|
})
|
|
|
|
|
this.isGetLocation = false
|
|
|
|
|
break;
|
|
|
|
|
case error.UNKNOWN_ERROR:
|
|
|
|
|
this.$msgbox.confirm("获取位置错误，请重试", "提示",{
|
|
|
|
|
confirmButtonText: '重试'
|
|
|
|
|
}).then(_ => {
|
|
|
|
|
this.getLocation()
|
|
|
|
|
})
|
|
|
|
|
this.isGetLocation = false
|
|
|
|
|
break;
|
|
|
|
|
default:
|
|
|
|
|
this.$msgbox.confirm("获取位置错误，请重试", "提示",{
|
|
|
|
|
confirmButtonText: '重试'
|
|
|
|
|
}).then(_ => {
|
|
|
|
|
this.getLocation()
|
|
|
|
|
})
|
|
|
|
|
this.isGetLocation = false
|
|
|
|
|
break;
|
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
navigator.geolocation.getCurrentPosition((pos) => {
|
|
|
|
|
this.isGetLocation = true
|
|
|
|
|
console.log('经度', pos.coords.latitude);
|
|
|
|
|
console.log('纬度', pos.coords.longitude);
|
|
|
|
|
this.pos.lng = pos.coords.longitude
|
|
|
|
|
this.pos.lat = pos.coords.latitude
|
|
|
|
|
if(this.pos.lat && this.pos.lng && this.isGetLocation) {
|
|
|
|
|
this.pos2Address(this.pos.lat, this.pos.lng)
|
|
|
|
|
preDistance({
|
|
|
|
|
location: `${this.pos.lng},${this.pos.lat}`
|
|
|
|
|
}).then(res => {
|
|
|
|
|
this.isOutSign = res.distance > Number(res.max_distance)
|
|
|
|
|
this.maxDistance = res.max_distance
|
|
|
|
|
this.nowDistance = res.distance
|
|
|
|
|
resolve()
|
|
|
|
|
}).catch(err => reject(err))
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}, (error) => {
|
|
|
|
|
console.log(error)
|
|
|
|
|
reject(error)
|
|
|
|
|
if (error.code) {
|
|
|
|
|
switch (error.code) {
|
|
|
|
|
case error.PERMISSION_DENIED:
|
|
|
|
|
this.$msgbox.confirm("需授权定位后进行打卡", "提示",{
|
|
|
|
|
confirmButtonText: '重试'
|
|
|
|
|
}).then(_ => {
|
|
|
|
|
this.getLocation()
|
|
|
|
|
})
|
|
|
|
|
this.isGetLocation = false
|
|
|
|
|
break;
|
|
|
|
|
case error.POSITION_UNAVAILABLE:
|
|
|
|
|
this.$msgbox.confirm("无法获取当前位置，请重试", "提示",{
|
|
|
|
|
confirmButtonText: '重试'
|
|
|
|
|
}).then(_ => {
|
|
|
|
|
this.getLocation()
|
|
|
|
|
})
|
|
|
|
|
this.isGetLocation = false
|
|
|
|
|
break;
|
|
|
|
|
case error.TIMEOUT:
|
|
|
|
|
this.$msgbox.confirm("获取位置超时，请重试", "提示",{
|
|
|
|
|
confirmButtonText: '重试'
|
|
|
|
|
}).then(_ => {
|
|
|
|
|
this.getLocation()
|
|
|
|
|
})
|
|
|
|
|
this.isGetLocation = false
|
|
|
|
|
break;
|
|
|
|
|
case error.UNKNOWN_ERROR:
|
|
|
|
|
this.$msgbox.confirm("获取位置错误，请重试", "提示",{
|
|
|
|
|
confirmButtonText: '重试'
|
|
|
|
|
}).then(_ => {
|
|
|
|
|
this.getLocation()
|
|
|
|
|
})
|
|
|
|
|
this.isGetLocation = false
|
|
|
|
|
break;
|
|
|
|
|
default:
|
|
|
|
|
this.$msgbox.confirm("获取位置错误，请重试", "提示",{
|
|
|
|
|
confirmButtonText: '重试'
|
|
|
|
|
}).then(_ => {
|
|
|
|
|
this.getLocation()
|
|
|
|
|
})
|
|
|
|
|
this.isGetLocation = false
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
@ -197,10 +297,20 @@ export default {
|
|
|
|
|
bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.sign-statue {
|
|
|
|
|
.sign-info {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
line-height: 2;
|
|
|
|
|
text-align: center;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
padding: 0 10%;
|
|
|
|
|
|
|
|
|
|
.sign-statue {
|
|
|
|
|
line-height: 2;
|
|
|
|
|
text-align: center;
|
|
|
|
|
flex-basis: 50%;
|
|
|
|
|
}
|
|
|
|
|
.sign-log {
|
|
|
|
|
flex-basis: 50%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@keyframes scale {
|
|
|
|
|
0%,100% {
|
|
|
|
|
@ -210,4 +320,14 @@ export default {
|
|
|
|
|
transform: scale(1.1, 1.1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 992px) {
|
|
|
|
|
.sign-info {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
.sign-log {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
