theluyuan/beelink
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request 'ceshi' (#38) from xbx into master

Browse Source 
Reviewed-on: http://git.luyuan.tk/luyuan/beelink/pulls/38
This commit is contained in:
luyuan 2020-10-14 09:13:30 +08:00
commit 9fa44512e4
5 changed files with 277 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -2,7 +2,7 @@
<!-- <div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div> -->
</div> -->
<router-view/>
</template>
<script lang="ts">

4
src/router/index.ts
View File

@ -96,6 +96,10 @@ const routes: Array<RouteRecordRaw> = [
{
path: "date",
component: () => import("../views/regime/date.vue")
},
{
path: "week",
component: () => import("../views/regime/week.vue")
}
]
},

51
src/utils/date.ts
View File

@ -1,6 +1,19 @@
import dayjs from 'dayjs'
export function getdate(yue?: number){
interface Date{
day?: number;
list?: Array<unknown>;
}
interface GetDate{
date: Array<Array<Date>>;
year: number;
yue: number;
day: number;
zhou: number;
}
export function getdate(yue?: number): GetDate{
let now = dayjs()
if(yue != undefined){
now = now.month(now.month() + yue);
@ -19,10 +32,7 @@ export function getdate(yue?: number){
let i = 0;
let w = 0;
interface Date{
day?: number;
list?: Array<any>;
}
const date: Array<Array<Date>> = [[]];
while(i < month){
@ -48,3 +58,34 @@ export function getdate(yue?: number){
return {date, year, yue, day, zhou};
}
export function getweek(zhou?: number){
let now = dayjs()
if(zhou != undefined){
now = now.day(now.day() + (zhou * 6));
}
const yue = now.month() + 1;
const day = now.date() // 当前天
zhou = now.day(); // 当前周几
const year = now.year()
interface Date{
day: string;
list?: Array<any>;
}
const date: Array<Date> = [];
for(let i = 0; i < 7; i++){
console.log(i);
now = now.day(i + 1)
date[i] = {day: ""};
date[i].day = now.year() + "-" + (now.month() < 10 ? '0' + now.month() : now.month()) + "-" + (now.date() < 10 ? '0' + now.date() : now.date())
date[i].list = []
for(let j = 0;j < 24; j++){
date[i].list?.push({
start:"",
num:""
})
}
}
console.log(date)
return {date, year, yue, day, zhou}
}

2
src/views/regime/date.vue
View File

@ -179,9 +179,9 @@
>div::last-child{
border: unset;
}
}
}
}
}
}
</style>

225
src/views/regime/week.vue Normal file
View File

@ -0,0 +1,225 @@
<template>
<div class="week">
<div class="head">
<div @click="zhou--">
<img src="" alt="">
上一周
</div>
2020年10月
<a-button type="primary" class="button">
月日历
</a-button>
<div @click="zhou++">
下一周
<img src="" alt="">
</div>
</div>
<div class="week">
<div class="heads">
<div></div>
<div :class="{zhou: zhou == 0 && week.zhou == 1}">周一<span>{{week.date[0].day}}</span></div>
<div :class="{zhou: zhou == 0 && week.zhou == 2}">周二<span>{{week.date[1].day}}</span></div>
<div :class="{zhou: zhou == 0 && week.zhou == 3}">周三<span>{{week.date[2].day}}</span></div>
<div :class="{zhou: zhou == 0 && week.zhou == 4}">周四<span>{{week.date[3].day}}</span></div>
<div :class="{zhou: zhou == 0 && week.zhou == 5}">周五<span>{{week.date[4].day}}</span></div>
<div :class="{zhou: zhou == 0 && week.zhou == 6}">周六<span>{{week.date[5].day}}</span></div>
<div :class="{zhou: zhou == 0 && week.zhou == 0}">周日<span>{{week.date[6].day}}</span></div>
</div>
<div class="body">
<div class="row" v-for="item in 24" :key="item">
<div class="day date">{{item > 10 ? item : '0' + item}}:00</div>
<div v-for="i in 7" :key="i">
<div class="day">
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.week{
display: flex;
flex-direction: column;
align-items: center;
.head{
width: 1320px;
height: 57px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
position: relative;
>div{
display: flex;
align-items: center;
font-size: 13px;
color: #0DBBA4;
>img{
width: 7px;
height: 11px;
}
}
>div:first-child{
margin-right: 90px;
>img{
margin-right: 11px;
}
}
>div:last-child{
margin-left: 90px;
>img{
margin-left: 11px;
}
}
.button{
width: 57px;
height: 26px;
background-color: #0DBBA4;
border-right: 4px;
border: none;
font-size: 10px;
color: #fff;
padding: 0;
position: absolute;
right: 40px;
}
}
.week{
.heads{
width: 1320px;
height: 63px;
display: flex;
>div{
width: 100%;
height: 100%;
background-color: #F5FEFD;
text-align: center;
line-height: 1;
font-size: 13px;
color: #08AE98;
border-right: 1px solid #eee;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
>span{
font-size: 11px;
margin-top: 9px;
color: #111;
}
}
.zhou{
color: #fff;
background: #08AE98;
>span{
color: #fff;
}
}
}
.body{
width: 100%;
.row{
background-color: #fff;
height: 63px;
width: 100%;
display: flex;
.date{
background-color: #F5FEFD;
text-align: center;
line-height: 63px;
font-size: 11px;
color: #111;
}
>div{
width: 100%;
border-top: 1px solid #eee;
border-right: 1px solid #eee;
.day{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
color: #111;
>div{
height: 100%;
border-radius: 6px;
padding: 18px;
overflow: hidden;
.item{
display: flex;
align-items: center;
margin-top: 11px;
>div{
width: 6px;
height: 6px;
background-color: #111;
margin-right: 6px;
border-radius: 50%;
}
>p{
line-height: 1;
margin: 0;
}
}
}
.old{
background-color: #F7F7F7;
}
.ing{
background-color: #0DBBA4;
color: #fff;
.item{
>div{
background-color: #fff;
}
}
}
.next{
background-color: #CEF9F0;
color: #0DBBA4;
.item{
>div{
background-color: #0DBBA4;
}
}
}
}
}
>div::last-child{
border: unset;
}
}
}
}
}
</style>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import { getweek } from "@/utils/date"
export default defineComponent({
props:{
},
setup(){
const zhou = ref(0);
const week = ref(getweek());
console.log(week.value)
watch(zhou,(value) => {
week.value = getweek(value)
console.log(week.value)
})
return {
zhou,
week
}
}
})
</script>