mirror of
https://github.com/kuaifan/dootask.git
synced 2026-03-02 23:27:04 +00:00
perf: 查看我自己的签到数据
This commit is contained in:
kuaifan
parent
f917b39432
commit
d5998efd91
@ -8,6 +8,7 @@ use App\Models\Project;
|
||||
use App\Models\UmengAlias;
|
||||
use App\Models\User;
|
||||
use App\Models\UserCheckinMac;
|
||||
use App\Models\UserCheckinRecord;
|
||||
use App\Models\UserDelete;
|
||||
use App\Models\UserDepartment;
|
||||
use App\Models\UserEmailVerification;
|
||||
@ -1388,4 +1389,52 @@ class UsersController extends AbstractController
|
||||
//
|
||||
return UserCheckinMac::saveMac($user->userid, $array);
|
||||
}
|
||||
|
||||
/**
|
||||
* @api {get} api/users/checkin/list 22. 获取签到数据
|
||||
*
|
||||
* @apiDescription 需要token身份
|
||||
* @apiVersion 1.0.0
|
||||
* @apiGroup users
|
||||
* @apiName checkin__list
|
||||
*
|
||||
* @apiParam {String} ym 年-月（如：2020-01）
|
||||
*
|
||||
* @apiSuccess {Number} ret 返回状态码（1正确、0错误）
|
||||
* @apiSuccess {String} msg 返回信息（错误描述）
|
||||
* @apiSuccess {Object} data 返回数据
|
||||
*/
|
||||
public function checkin__list()
|
||||
{
|
||||
$user = User::auth();
|
||||
//
|
||||
$ym = trim(Request::input('ym'));
|
||||
$start = Carbon::parse(date("Y-m-01 00:00:00", strtotime($ym)));
|
||||
$end = (clone $start)->addMonth()->subSecond();
|
||||
//
|
||||
$records = UserCheckinRecord::whereUserid($user->userid)->whereBetween('created_at', [$start, $end])->orderBy('id')->get();
|
||||
$array = [];
|
||||
$startT = $start->timestamp;
|
||||
$endT = $end->timestamp;
|
||||
while ($startT < $endT) {
|
||||
$between = [Carbon::createFromTimestamp($startT), Carbon::createFromTimestamp($startT + 86400)];
|
||||
$firstRecord = $records->whereBetween("created_at", $between)->first();
|
||||
$lastRecord = $records->whereBetween("created_at", $between)->last();
|
||||
$firstTimestamp = $firstRecord ? Carbon::parse($firstRecord->created_at)->toDateTimeString() : '';
|
||||
$lastTimestamp = $lastRecord ? Carbon::parse($lastRecord->created_at)->toDateTimeString() : '';
|
||||
if ($firstTimestamp) {
|
||||
$data = [
|
||||
'time' => $firstTimestamp,
|
||||
'all' => [$firstTimestamp],
|
||||
];
|
||||
if ($lastTimestamp) {
|
||||
$data['all'][] = $lastTimestamp;
|
||||
}
|
||||
$array[] = $data;
|
||||
}
|
||||
$startT += 86400;
|
||||
}
|
||||
//
|
||||
return Base::retSuccess('success', $array);
|
||||
}
|
||||
}
|
||||
|
||||
407
resources/assets/js/pages/manage/components/CheckinCalendar.vue
Normal file
407
resources/assets/js/pages/manage/components/CheckinCalendar.vue
Normal file
@ -0,0 +1,407 @@
|
||||
<template>
|
||||
<div class="checkin-calendar">
|
||||
<div class="calendar-header">
|
||||
<div class="calendar-header-menu">
|
||||
<Icon type="ios-arrow-back" class="month-less" @click="prevMonth"/>
|
||||
<h4>{{$L('(*)年(*)月', year, month)}}</h4>
|
||||
<Icon v-if="hasNextMonth" type="ios-arrow-forward" class="month-add" @click="nextMonth"/>
|
||||
</div>
|
||||
<Button v-if="hasNextMonth" class="calendar-header-back" size="small" @click="nowMonth">{{$L('返回本月')}}</Button>
|
||||
</div>
|
||||
<table class="sign_tab" border="0px" cellpadding="0px" cellspacing="0px">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{$L('日')}}</th>
|
||||
<th>{{$L('一')}}</th>
|
||||
<th>{{$L('二')}}</th>
|
||||
<th>{{$L('三')}}</th>
|
||||
<th>{{$L('四')}}</th>
|
||||
<th>{{$L('五')}}</th>
|
||||
<th>{{$L('六')}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in dateArr" v-if="contains(item)">
|
||||
<template v-for="data in item">
|
||||
<td v-if="isCheck(data.date)"
|
||||
:class="{'disa':monthClass(data.month), 'cur_day': doCheck(data.date),'check_day': isCheck(data.date) }">
|
||||
<Tooltip max-width="auto" transfer>
|
||||
<div slot="content" v-html="getTimes(data.date)"></div>
|
||||
<template v-if="doCheck(data.date)">{{$L('今天')}}</template>
|
||||
<template v-else>{{data.date | getCD}}</template>
|
||||
<span :class="{'ui-state-down': true }">{{$L('已签到(*)次', getGold(data.date))}}</span>
|
||||
</Tooltip>
|
||||
</td>
|
||||
<template v-if="(!isCheck(data.date) && (doCheck(data.date) && !hasCheckin))">
|
||||
<td v-if="!monthClass(data.month)"
|
||||
@click="checkNow"
|
||||
:class="{'disa':monthClass(data.month), 'over':data.date == '', 'cur_day': doCheck(data.date) }">
|
||||
{{$L('今天')}}
|
||||
<span :class="{'ui-state-default': true }">{{$L('尚未签到')}}</span>
|
||||
</td>
|
||||
<td v-else
|
||||
:class="{'disa':monthClass(data.month), 'over':data.date == '', 'cur_day': doCheck(data.date) }">
|
||||
{{data.date | getCD}}
|
||||
</td>
|
||||
</template>
|
||||
<td v-if="!isCheck(data.date) && (!doCheck(data.date)) "
|
||||
:class="{'disa':monthClass(data.month), 'over':data.date == '', 'cur_day': doCheck(data.date) }">
|
||||
{{data.date | getCD}}
|
||||
</td>
|
||||
</template>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div v-if="loadIng" class="calendar-loading">
|
||||
<Loading/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'CheckinCalendar',
|
||||
props: {
|
||||
checkin: {
|
||||
type: Array
|
||||
},
|
||||
loadIng: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
today: new Date(),
|
||||
year: '',
|
||||
month: '',
|
||||
day: '',
|
||||
date: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
dateArr: [],
|
||||
hasCheckin: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.year = this.today.getFullYear();
|
||||
this.month = this.today.getMonth() + 1;
|
||||
this.day = this.today.getDay();
|
||||
this.date = this.today.getDate();
|
||||
|
||||
this.getCalendar();
|
||||
},
|
||||
filters: {
|
||||
getCD(val) {
|
||||
return val.split('/')[2]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dateArr: {
|
||||
deep: true,
|
||||
handler: function (val, oldVal) {
|
||||
this.startTime = val[0][0].date;
|
||||
this.endTime = val[5][6].date;
|
||||
this.setMonth(this.year + '/' + this.month, [this.startTime, this.endTime]);
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasNextMonth() {
|
||||
const {year, month} = this;
|
||||
const {y, m} = {y: $A.formatDate("Y"), m: $A.formatDate("m")};
|
||||
return parseInt(year) != y || parseInt(month) < parseInt(m);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkNow() {
|
||||
this.$emit('checkIn')
|
||||
},
|
||||
setMonth(date,) {
|
||||
this.$emit('setMonth', date, [this.startTime, this.endTime])
|
||||
},
|
||||
monthClass(type) {
|
||||
return type != 'cur';
|
||||
},
|
||||
getGold(thisDay) {
|
||||
for (let i in this.checkin) {
|
||||
if (this.checkin.hasOwnProperty(i)) {
|
||||
var d = new Date(this.checkin[i].time.replace(/-/g, '/'));
|
||||
var _ymd = d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate();
|
||||
|
||||
if (new Date(thisDay).getTime() == new Date(_ymd).getTime()) {
|
||||
return this.checkin[i].all.length;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
getTimes(thisDay) {
|
||||
for (let i in this.checkin) {
|
||||
if (this.checkin.hasOwnProperty(i)) {
|
||||
var d = new Date(this.checkin[i].time.replace(/-/g, '/'));
|
||||
var _ymd = d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate();
|
||||
|
||||
if (new Date(thisDay).getTime() == new Date(_ymd).getTime()) {
|
||||
return this.checkin[i].all.join('<br/>');
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
isLeap() {
|
||||
const year = this.year;
|
||||
if (year % 4 == 0 && year % 100 > 0) {
|
||||
return true;
|
||||
} else return year % 400 == 0 && year % 3200 > 0;
|
||||
},
|
||||
getLen(m) {
|
||||
const month = m || this.month;
|
||||
if (month == 2) {
|
||||
if (this.isLeap) {
|
||||
return 29;
|
||||
} else {
|
||||
return 28;
|
||||
}
|
||||
} else {
|
||||
if (month < 8) {
|
||||
if (month % 2 > 0) {
|
||||
return 31;
|
||||
} else {
|
||||
return 30;
|
||||
}
|
||||
} else {
|
||||
if (month % 2 > 0) {
|
||||
return 30;
|
||||
} else {
|
||||
return 31;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
getCalendarTime() {
|
||||
return this.year + '-' + this.month + '-' + this.date;
|
||||
},
|
||||
getCalendar() {
|
||||
let len = this.getLen();
|
||||
let d = new Date(this.year, this.month - 1, 1);
|
||||
let dfw = d.getDay();
|
||||
let arr = [];
|
||||
let tem = 0;
|
||||
let nextTem = 1;
|
||||
let pre = dfw - 1
|
||||
|
||||
let _lastLen = this.getLen(this.month - 1)
|
||||
|
||||
for (let i = 0; i < 6; i++) {
|
||||
arr[i] = [];
|
||||
for (let j = 0; j < 7; j++) {
|
||||
tem++;
|
||||
if (tem - dfw > 0 && tem - dfw <= len) {
|
||||
arr[i][j] = {date: this.year + '/' + (this.month) + '/' + (tem - dfw), month: 'cur'};
|
||||
} else {
|
||||
if (tem <= dfw) {
|
||||
arr[i][j] = {
|
||||
date: this.year + '/' + (this.month - 1) + '/' + (_lastLen - pre),
|
||||
month: 'pre'
|
||||
};
|
||||
pre--;
|
||||
|
||||
} else {
|
||||
arr[i][j] = {date: this.year + '/' + (this.month + 1) + '/' + (nextTem), month: 'next'};
|
||||
nextTem++
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.dateArr = arr;
|
||||
},
|
||||
nextMonth() {
|
||||
if (this.month == 12) {
|
||||
this.year++;
|
||||
this.month = 1;
|
||||
} else {
|
||||
this.month++;
|
||||
}
|
||||
this.getCalendar();
|
||||
this.$emit('changeMonth', this.ym())
|
||||
},
|
||||
prevMonth() {
|
||||
if (this.month == 1) {
|
||||
this.year--;
|
||||
this.month = 12;
|
||||
} else {
|
||||
this.month--;
|
||||
}
|
||||
this.getCalendar();
|
||||
this.$emit('changeMonth', this.ym())
|
||||
},
|
||||
nowMonth() {
|
||||
this.year = parseInt($A.formatDate("Y"));
|
||||
this.month = parseInt($A.formatDate("m"));
|
||||
this.getCalendar();
|
||||
this.$emit('changeMonth', this.ym())
|
||||
},
|
||||
contains(arr) {
|
||||
return !((arr[0] == '') && (arr[1] == '') && (arr[2] == '') && (arr[3] == '') && (arr[4] == '') && (arr[5] == '') && (arr[6] == ''));
|
||||
},
|
||||
isCheck(index) {
|
||||
for (let i in this.checkin) {
|
||||
let todayDate = new Date();
|
||||
let today = todayDate.getFullYear() + '/' + (todayDate.getMonth() + 1) + '/' + todayDate.getDate();
|
||||
let d = new Date(this.checkin[i].time.replace(/-/g, '/'));
|
||||
let _ymd = d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate();
|
||||
if (new Date(today).getTime() == new Date(_ymd).getTime()) {
|
||||
//今日已经签到
|
||||
this.hasCheckin = true;
|
||||
}
|
||||
|
||||
if (new Date(index).getTime() == new Date(_ymd).getTime()) {
|
||||
//console.log('已经签到')
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
doCheck(d) {
|
||||
let dString = new Date().getFullYear() + '/' + (new Date().getMonth() + 1) + '/' + new Date().getDate();
|
||||
return new Date(d).getTime() == new Date(dString).getTime();
|
||||
},
|
||||
ym() {
|
||||
return this.year + '-' + (this.month < 10 ? ('0' + this.month) : this.month);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.checkin-calendar {
|
||||
width: 100%;
|
||||
margin: -10px 0 24px 0;
|
||||
color: #555;
|
||||
position: relative;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 3px;
|
||||
.calendar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #eee;
|
||||
.calendar-header-menu {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
.calendar-header-back {
|
||||
margin-right: 14px;
|
||||
}
|
||||
}
|
||||
.calendar-loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
background-color: rgba(55, 55, 55, .15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
h4 {
|
||||
line-height: 40px;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
top: 5px;
|
||||
font-size: 18px;
|
||||
color: #777;
|
||||
&.month-less {
|
||||
left: 10px;
|
||||
}
|
||||
&.month-add {
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
.sign_tab {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
th {
|
||||
text-align: center;
|
||||
height: 48px;
|
||||
font-weight: 700;
|
||||
}
|
||||
td {
|
||||
position: relative;
|
||||
padding: 15px 0;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
border-right: 1px solid #eee;
|
||||
border-top: 1px solid #eee;
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
&.over {
|
||||
background-color: #fff;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
&.disa {
|
||||
color: #ccc !important;
|
||||
background: none !important;
|
||||
|
||||
* {
|
||||
color: #ccc !important;
|
||||
|
||||
}
|
||||
}
|
||||
&.check_day {
|
||||
background-color: #f8f8f8;
|
||||
color: #58ce7a;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
padding-top: 2px;
|
||||
line-height: 26px;
|
||||
.ivu-tooltip {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
.ivu-tooltip-rel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 26px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui-state-down,
|
||||
.ui-state-default {
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 3px;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.sign_tab {
|
||||
td {
|
||||
&.cur_day {
|
||||
background-color: #F29D38;
|
||||
color: #FFF;
|
||||
padding-top: 2px;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<div class="setting-item submit">
|
||||
<Form ref="formData" label-width="auto" @submit.native.prevent>
|
||||
<Alert style="margin-bottom:18px">
|
||||
<Alert>
|
||||
{{$L('设备连接上指定路由器（WiFi）后自动签到。')}}
|
||||
</Alert>
|
||||
<div class="setting-checkin-button" @click="calendarShow=true">{{$L('查看我的签到数据')}}</div>
|
||||
<Row class="setting-template">
|
||||
<Col span="12">{{$L('设备MAC地址')}}</Col>
|
||||
<Col span="12">{{$L('备注')}}</Col>
|
||||
@ -27,11 +28,22 @@
|
||||
<Button :loading="loadIng > 0" type="primary" @click="submitForm">{{$L('提交')}}</Button>
|
||||
<Button :loading="loadIng > 0" @click="resetForm" style="margin-left: 8px">{{$L('重置')}}</Button>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
v-model="calendarShow"
|
||||
:title="$L('签到数据')"
|
||||
footer-hide
|
||||
:mask-closable="false">
|
||||
<CheckinCalendar ref="calendar" :loadIng="calendarLoading > 0" :checkin="calendarData" @changeMonth="changeMonth"/>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CheckinCalendar from "../components/CheckinCalendar";
|
||||
export default {
|
||||
components: {CheckinCalendar},
|
||||
|
||||
data() {
|
||||
return {
|
||||
loadIng: 0,
|
||||
@ -42,6 +54,10 @@ export default {
|
||||
'mac': '',
|
||||
'remark': '',
|
||||
},
|
||||
|
||||
calendarShow: false,
|
||||
calendarLoading: 0,
|
||||
calendarData: [],
|
||||
}
|
||||
},
|
||||
|
||||
@ -49,6 +65,16 @@ export default {
|
||||
this.initData();
|
||||
},
|
||||
|
||||
watch: {
|
||||
calendarShow(val) {
|
||||
if (val) {
|
||||
this.$nextTick(_ => {
|
||||
this.changeMonth(this.$refs.calendar.ym());
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
initData() {
|
||||
this.loadIng++;
|
||||
@ -108,6 +134,26 @@ export default {
|
||||
this.addDatum();
|
||||
}
|
||||
},
|
||||
|
||||
changeMonth(ym) {
|
||||
setTimeout(_ => {
|
||||
this.calendarLoading++;
|
||||
}, 600)
|
||||
this.$store.dispatch("call", {
|
||||
url: 'users/checkin/list',
|
||||
data: {ym}
|
||||
}).then(({data}) => {
|
||||
if (this.$refs.calendar.ym() != ym) {
|
||||
return;
|
||||
}
|
||||
this.calendarData = data;
|
||||
}).catch(({msg}) => {
|
||||
this.calendarData = [];
|
||||
$A.modalError(msg);
|
||||
}).finally(_ => {
|
||||
this.calendarLoading--;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -163,6 +163,14 @@
|
||||
line-height: 32px;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
.setting-checkin-button {
|
||||
margin-bottom: 18px;
|
||||
cursor: pointer;
|
||||
color: #2b85e4;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
&.submit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user