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.
333 lines
7.9 KiB
333 lines
7.9 KiB
<template>
|
|
<view class="content">
|
|
<maps ref="maps"></maps>
|
|
<view class="tabbar">
|
|
<view @click="getShow = true">
|
|
<img src="../../static/get.png" alt="">
|
|
<p>上班打卡</p>
|
|
</view>
|
|
<view @click="goPoint">
|
|
<img src="../../static/address.png" alt="">
|
|
<p>签到点打卡</p>
|
|
</view>
|
|
<view @click="inspectShow=true">
|
|
<img src="../../static/up.png" alt="">
|
|
<p>问题上报</p>
|
|
</view>
|
|
<view @click="goSolve">
|
|
<img src="../../static/resolve.png" alt="">
|
|
<p>问题处理</p>
|
|
</view>
|
|
</view>
|
|
<!-- 上班打卡 -->
|
|
<view class="get">
|
|
<u-popup v-model="getShow" mode="bottom" :close-icon-size="20" :border-radius="20" :closeable="true"
|
|
:custom-style="getStyle">
|
|
<view class="getwrap">
|
|
<view>当前时间：{{nowTime}}</view>
|
|
<view v-if="isGet" class="isget">
|
|
<view class="getinfo">请确认时间和地点，再打卡</view>
|
|
<view @click="openGetConfirmShow" class="getcircle">{{getStatus?'上班打卡':'下班打卡'}}</view>
|
|
</view>
|
|
<view v-if="!isGet" class="isget">
|
|
<view class="gettime">
|
|
<view>上班打卡时间：{{getTime}}</view>
|
|
<view>下班打卡时间：{{downTime}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="getaddress">
|
|
<img src="../../static/dw.png" alt="">
|
|
{{address}}
|
|
</view>
|
|
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
<view class="getConfirm">
|
|
<u-modal :show-title="false" v-model="getConfirmShow" :content="getConfirmContent"
|
|
:show-cancel-button="true" @confirm="getConfirm"></u-modal>
|
|
</view>
|
|
<!-- 巡查问题上报 -->
|
|
<view class="get">
|
|
<u-popup v-model="inspectShow" mode="bottom" :close-icon-size="20" :border-radius="20" :closeable="true"
|
|
:custom-style="getStyle">
|
|
<view class="getwrap">
|
|
<view>当前时间：{{nowTime}}</view>
|
|
<view class="getinfo" style="opacity: 0;">请确认时间和地点，再打卡</view>
|
|
<view @click="goInspect(1)" class="getcircle">上报问题</view>
|
|
<view class="getaddress" @click="goInspect(2)" style="color:#0385e5">
|
|
查看您提交过的问题
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
|
|
|
|
|
|
<u-toast ref="uToast" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import maps from '@/components/maps/maps'
|
|
components: {
|
|
maps
|
|
}
|
|
export default {
|
|
data() {
|
|
return {
|
|
getShow: false,
|
|
getConfirmShow: false,
|
|
getConfirmContent: "是否确认上班打卡？", // 弹出字
|
|
getStatus: true, // 上班打卡还是下班打卡
|
|
getId: "", // 上班打卡后返回的id
|
|
isGet: true, // 是否完成打卡
|
|
getTime: "",
|
|
downTime: "",
|
|
|
|
|
|
inspectShow: false,
|
|
getStyle: {
|
|
left: "10rpx",
|
|
right: "10rpx",
|
|
bottom: "10rpx",
|
|
width: "auto",
|
|
borderRadius: "20rpx"
|
|
},
|
|
date: new Date().toISOString(),
|
|
latitude: "",
|
|
longitude: "",
|
|
address: "",
|
|
nowTime: "",
|
|
|
|
|
|
}
|
|
},
|
|
|
|
|
|
onReady() {
|
|
let that = this
|
|
that.nowTime = this.getNowTime(that.date)
|
|
that.util.initAddress(function(res) {
|
|
console.log(res)
|
|
that.latitude = res.latitude
|
|
that.longitude = res.longitude
|
|
that.address = res.address
|
|
// that.$refs.maps.moveto(res.longitude,res.latitude)
|
|
})
|
|
|
|
},
|
|
onLoad() {
|
|
let that = this;
|
|
this.getGetStatus()
|
|
setInterval(function() {
|
|
that.date = Date.parse(new Date());
|
|
that.nowTime = that.getNowTime(that.date)
|
|
}, 1000);
|
|
},
|
|
|
|
methods: {
|
|
getNowTime(time) {
|
|
let date = new Date(time);
|
|
let weekDay = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
|
|
let year = date.getFullYear();
|
|
let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
|
|
let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
|
|
let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
|
|
let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
|
|
let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
|
|
let weekDays = weekDay[date.getDay()]
|
|
return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds + " " + weekDays;
|
|
},
|
|
// 获取今日打卡状态
|
|
getGetStatus() {
|
|
var that = this
|
|
that.util.request({
|
|
api: '/api/mobile/work-sign/show',
|
|
method: "get",
|
|
data: {},
|
|
utilSuccess: function(res) {
|
|
if (res.length == 0) {
|
|
console.log("未打卡")
|
|
} else {
|
|
console.log(that.isGet)
|
|
if (res[0].updated_at == null) {
|
|
that.getId = res[0].id
|
|
that.getStatus = false
|
|
that.getConfirmShow = false
|
|
that.getConfirmContent = "是否确认下班打卡？"
|
|
} else {
|
|
that.getTime = res[0].created_at
|
|
that.downTime = res[0].updated_at
|
|
that.isGet = false
|
|
}
|
|
}
|
|
},
|
|
utilFail: function(res) {
|
|
that.util.alert(res);
|
|
}
|
|
});
|
|
},
|
|
// 上班打卡
|
|
openGetConfirmShow() {
|
|
this.getShow = false
|
|
this.getConfirmShow = true
|
|
},
|
|
getConfirm() {
|
|
var that = this
|
|
if (this.getStatus) {
|
|
// 上班打卡
|
|
that.util.request({
|
|
api: '/api/mobile/work-sign/store',
|
|
method: "post",
|
|
data: {
|
|
lat_in: this.latitude,
|
|
lng_in: this.longitude,
|
|
address_in: this.address
|
|
},
|
|
utilSuccess: function(res) {
|
|
that.$refs.uToast.show({
|
|
title: res.msg,
|
|
callback: function() {
|
|
// that.getStatus = false
|
|
// that.getConfirmShow = false
|
|
// that.getConfirmContent = "是否确认下班打卡？"
|
|
that.getGetStatus()
|
|
}
|
|
})
|
|
},
|
|
utilFail: function(res) {
|
|
that.util.alert(res);
|
|
}
|
|
});
|
|
} else {
|
|
that.util.request({
|
|
api: '/api/mobile/work-sign/save',
|
|
method: "post",
|
|
data: {
|
|
id: this.getId,
|
|
lat_out: this.latitude,
|
|
lng_out: this.longitude,
|
|
address_out: this.address
|
|
},
|
|
utilSuccess: function(res) {
|
|
that.$refs.uToast.show({
|
|
title: res.msg,
|
|
callback: function() {
|
|
// that.getStatus = false
|
|
// that.getConfirmShow = false
|
|
that.getGetStatus()
|
|
}
|
|
})
|
|
},
|
|
utilFail: function(res) {
|
|
that.util.alert(res);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
// 问题上报
|
|
goInspect(val) {
|
|
if (val == 1) {
|
|
console.log(val)
|
|
uni.navigateTo({
|
|
url: "../../inspect/inspect"
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: "../../inspect/list"
|
|
})
|
|
}
|
|
},
|
|
// 问题处理
|
|
goSolve() {
|
|
uni.navigateTo({
|
|
url: "../../solve/index"
|
|
})
|
|
},
|
|
// 问题处理
|
|
goPoint() {
|
|
uni.navigateTo({
|
|
url: "../../point/index"
|
|
})
|
|
},
|
|
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.content {}
|
|
|
|
.tabbar {
|
|
position: fixed;
|
|
left: 20rpx;
|
|
right: 20rpx;
|
|
bottom: 20rpx;
|
|
/* margin:30rpx; */
|
|
padding: 20rpx 20rpx;
|
|
background-color: #fff;
|
|
border-radius: 40rpx;
|
|
border: 1px solid #ddd;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
text-align: center;
|
|
}
|
|
|
|
.tabbar img {
|
|
width: 50rpx;
|
|
height: 50rpx
|
|
}
|
|
|
|
.tabbar p {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.get {
|
|
margin: 20rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.getwrap {
|
|
padding: 60rpx;
|
|
padding-bottom: 0rpx;
|
|
height: 480rpx
|
|
}
|
|
|
|
.isget {
|
|
height: 280rpx
|
|
}
|
|
|
|
.gettime {
|
|
padding-top: 90rpx
|
|
}
|
|
|
|
.getwrap view {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.getwrap .getinfo {
|
|
color: #000;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.getwrap .getcircle {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
border-radius: 200rpx;
|
|
background-color: deepskyblue;
|
|
line-height: 200rpx;
|
|
color: #fff;
|
|
font-size: 36rpx;
|
|
box-shadow: 0 0 0px 4px lightskyblue;
|
|
margin: 30rpx auto;
|
|
}
|
|
|
|
.getwrap img {
|
|
width: 36rpx;
|
|
vertical-align: sub;
|
|
margin-right: 10rpx;
|
|
}
|
|
</style>
|