|
|
|
@ -20,8 +20,8 @@ |
|
|
|
<view> |
|
|
|
<view class="calendar-top"> |
|
|
|
<view class="current-time"> |
|
|
|
<view class="year">{{ year }}</view> |
|
|
|
<view class="time">{{ monthDay }}</view> |
|
|
|
<view class="year">{{ selectDate.format('YYYY') }}年</view> |
|
|
|
<view class="time">{{ selectDate.format('MM') }}月</view> |
|
|
|
</view> |
|
|
|
<view class="calendar-desc"> |
|
|
|
<view class="calendar-desc-item">正常</view> |
|
|
|
@ -30,13 +30,16 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<uni-calendar class="uni-calendar--hook" :selected="selected" showMonth /> |
|
|
|
<uni-calendar class="uni-calendar--hook" |
|
|
|
@monthSwitch="monthSwitch" |
|
|
|
@change="changeDate" |
|
|
|
:selected="clockTotal.date" showMonth /> |
|
|
|
|
|
|
|
<view class="desc"> |
|
|
|
<view style="width: 100%;justify-content: flex-start;margin-top: 30rpx;" class="calendar-desc"> |
|
|
|
<view style="margin: 0rpx 45rpx;" class="calendar-desc-item">正常：<text>5</text></view> |
|
|
|
<view style="margin: 0rpx 45rpx;" class="calendar-desc-item">缺卡：<text>3</text></view> |
|
|
|
<view style="margin: 0rpx 45rpx;" class="calendar-desc-item">未打卡：<text>2</text></view> |
|
|
|
<view style="margin: 0rpx 45rpx;" class="calendar-desc-item">正常：<text>{{ clockTotal.normal }}</text></view> |
|
|
|
<view style="margin: 0rpx 45rpx;" class="calendar-desc-item">缺卡：<text>{{ clockTotal.noCard }}</text></view> |
|
|
|
<view style="margin: 0rpx 45rpx;" class="calendar-desc-item">未打卡：<text>{{ clockTotal.abnormal }}</text></view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -46,12 +49,21 @@ |
|
|
|
<view class="today-detail main"> |
|
|
|
<view class="today-detail-title">今日打卡详情</view> |
|
|
|
<uv-steps current="8" direction="column" dot> |
|
|
|
<uv-steps-item v-for="item in list" :key="item.id"> |
|
|
|
<uv-steps-item v-for="item in list" |
|
|
|
:key="item.id"> |
|
|
|
<template #title> |
|
|
|
<view class="today-detail-main"> |
|
|
|
<image :src="item.pic" mode="widthFix"></image> |
|
|
|
<image :src="item.pic" |
|
|
|
@click="previewImage([item.pic])" |
|
|
|
mode="aspectFill"></image> |
|
|
|
<view class="sign-detail"> |
|
|
|
<view class="time">{{ item.createTime }}</view> |
|
|
|
<view class="time" v-if="item.clockInTime">{{ item.clockInTime }}</view> |
|
|
|
<view class="time" v-else> |
|
|
|
{{ selectDate.format('YYYY-MM-DD ') + item.clockStartTime }} |
|
|
|
<view class="tag"> |
|
|
|
缺卡 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="address">{{ item.address }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -65,70 +77,69 @@ |
|
|
|
<script> |
|
|
|
import { mapState } from 'vuex' |
|
|
|
import mixinList from '@/mixins/list.js' |
|
|
|
/** |
|
|
|
* 获取任意时间 |
|
|
|
*/ |
|
|
|
function getDate(date, AddDayCount = 0) { |
|
|
|
if (!date) { |
|
|
|
date = new Date() |
|
|
|
} |
|
|
|
if (typeof date !== 'object') { |
|
|
|
date = date.replace(/-/g, '/') |
|
|
|
} |
|
|
|
const dd = new Date(date) |
|
|
|
|
|
|
|
dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期 |
|
|
|
const y = dd.getFullYear() |
|
|
|
const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0 |
|
|
|
const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0 |
|
|
|
return { |
|
|
|
fullDate: y + '-' + m + '-' + d, |
|
|
|
year: y, |
|
|
|
month: m, |
|
|
|
date: d, |
|
|
|
day: dd.getDay() |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
export default { |
|
|
|
mixins : [mixinList], |
|
|
|
name: "Record", |
|
|
|
data() { |
|
|
|
return { |
|
|
|
year: '', //年 |
|
|
|
monthDay: '', //月日 |
|
|
|
selected: [{ //info为1:正常 2:缺卡 3:未打卡 |
|
|
|
date: getDate(new Date(), -3).fullDate, |
|
|
|
info: 3 |
|
|
|
}, |
|
|
|
{ |
|
|
|
date: getDate(new Date(), -2).fullDate, |
|
|
|
info: 2 |
|
|
|
}, |
|
|
|
{ |
|
|
|
date: getDate(new Date(), -1).fullDate, |
|
|
|
info: 1 |
|
|
|
} |
|
|
|
return {//this.$dayjs().format('YYYY-MM-DD') |
|
|
|
// year: this.$dayjs().format('YYYY'), //年 |
|
|
|
// monthDay: this.$dayjs().format('MM'), //月日 |
|
|
|
selectDate : this.$dayjs(), |
|
|
|
selected: [ //info为1:正常 2:缺卡 3:未打卡 |
|
|
|
// { |
|
|
|
// date: getDate(new Date(), -3).fullDate, |
|
|
|
// info: 3 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// date: getDate(new Date(), -2).fullDate, |
|
|
|
// info: 2 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// date: getDate(new Date(), -1).fullDate, |
|
|
|
// info: 1 |
|
|
|
// } |
|
|
|
], |
|
|
|
mixinsListApi : 'clockList', |
|
|
|
clockTotal : { |
|
|
|
date : [], |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad() { |
|
|
|
this.queryParams.date = this.selectDate.format('YYYY-MM-DD HH:mm:ss') |
|
|
|
}, |
|
|
|
computed : { |
|
|
|
...mapState(['teamList', 'userInfo']), |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
this.getCurrentTime() |
|
|
|
this.getClockTotal() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
//获取打卡日期 |
|
|
|
getCurrentTime() { |
|
|
|
let currentDate = new Date(); |
|
|
|
this.year = currentDate.getFullYear(); |
|
|
|
let currentMonth = currentDate.getMonth() + 1; |
|
|
|
let currentDay = currentDate.getDate(); |
|
|
|
this.monthDay = |
|
|
|
`${currentMonth < 10 ? "0" + currentMonth : currentMonth}.${currentDay < 10 ? "0" + currentDay : currentDay}` |
|
|
|
getClockTotal(){ |
|
|
|
this.$api('clockTotal', { |
|
|
|
date : this.selectDate.format('YYYY-MM-DD HH:mm:ss') |
|
|
|
}, res => { |
|
|
|
if(res.code == 200){ |
|
|
|
res.result.date.forEach(n => { |
|
|
|
n.info = n.type + 1 |
|
|
|
}) |
|
|
|
|
|
|
|
this.clockTotal = res.result |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
//切换月份 |
|
|
|
monthSwitch(e){ |
|
|
|
this.selectDate = this.$dayjs(`${e.year}-${e.month}-01 01:00:10`) |
|
|
|
this.getClockTotal() |
|
|
|
}, |
|
|
|
// 切换日期 |
|
|
|
changeDate(e){ |
|
|
|
this.selectDate = this.$dayjs(`${e.fulldate} 01:00:10`) |
|
|
|
this.queryParams.date = this.selectDate.format('YYYY-MM-DD HH:mm:ss') |
|
|
|
this.getData() |
|
|
|
}, |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -147,7 +158,7 @@ |
|
|
|
// 签到日历 |
|
|
|
.sign-calendar { |
|
|
|
background: white; |
|
|
|
border-radius: 15rpx; |
|
|
|
border-radius: 30rpx; |
|
|
|
overflow: hidden; |
|
|
|
margin-top: 30rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
@ -162,6 +173,7 @@ |
|
|
|
.user-img { |
|
|
|
width: 150rpx; |
|
|
|
height: 150rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.base { |
|
|
|
@ -248,6 +260,10 @@ |
|
|
|
|
|
|
|
// 修改日历样式 |
|
|
|
&::v-deep .uni-calendar__header { |
|
|
|
// display: none !important; |
|
|
|
} |
|
|
|
|
|
|
|
&::v-deep .uni-calendar__header-text{ |
|
|
|
display: none !important; |
|
|
|
} |
|
|
|
|
|
|
|
@ -266,7 +282,7 @@ |
|
|
|
|
|
|
|
// 今日打卡详情 |
|
|
|
.today-detail { |
|
|
|
border-radius: 15rpx; |
|
|
|
border-radius: 30rpx; |
|
|
|
background: white; |
|
|
|
margin-top: 35rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
@ -284,10 +300,26 @@ |
|
|
|
margin: 15rpx 0rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
padding: 20rpx 15rpx; |
|
|
|
font-size: 26rpx; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 30%; |
|
|
|
width: 220rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
flex-shrink: 0; |
|
|
|
height: 150rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.time{ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
.tag{ |
|
|
|
border: 1px solid #F97D00; |
|
|
|
color: #F97D00; |
|
|
|
padding: 2rpx 6rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
font-size: 22rpx; |
|
|
|
margin-left: 20rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.sign-detail { |
|
|
|
|
