Browse Source

日历

lwx_15
超级管理员 1 year ago
parent
commit
fb050d09c2
  1. 60
      src/api/calendar/Calendar.ts
  2. 36
      src/api/calendar/DateClass.ts
  3. 6
      src/components/DesignForm/app/calendar/calendar1/calendarPage.vue
  4. 1
      src/components/DesignForm/app/calendar/calendar1/monthPage.vue
  5. 71
      src/components/DesignForm/app/calendar/calendar1/weekPage.vue
  6. 6
      src/types/components.d.ts

60
src/api/calendar/Calendar.ts

@ -82,7 +82,7 @@ class Calendar {
const y = date[1] === 1 ? date[0] - 1 : date[0];
const m = date[1] === 1 ? 12 : date[1] - 1;
let w = DateClass.solarMonth(y, m);
// console.log("获取当月前面需补齐的数组-->",y,m,w,last)
console.log("获取当月前面需补齐的数组-->",y,m,w,last)
const arr: dateBase[] = [];
for (let i = 0; i < last; i++) {
const lun = DateClass.getLunars(y, m, w - i);
@ -171,13 +171,17 @@ class Calendar {
const result = this.validateDate(date);
const currentDay = DateClass.solarWeeks(result[0], result[1]);
// console.log("获取当月的完整数据",currentDay,result)
console.log("获取当月的完整数据",currentDay,result)
// 获取当月的完整数据
const beforDays = this.beforDays(date, currentDay).reverse();
const m = this.getDay(date, beforDays);
console.log("获取当月的完整数据--->",m,date)
const afterDays = this.afterDays(m, date);
// 转化成参数
const params = this.getDateParams(afterDays, date);
@ -190,6 +194,58 @@ class Calendar {
// console.log("日历数据",dateArray)
return dateArray;
}
//获得一周的所有日期
getWeekNumber(year: number, month: number, taday: number) {
let dateStr = year + "-" + month + "-" + taday; // 要转换的日期字符串
let now = new Date(dateStr);
let nowTime = now.getTime();
let second = nowTime % 86400000;
let day = (now.getDay() + 6) % 7;
let endTime = nowTime - second + new Date().getTimezoneOffset() * 60000 - day * 86400000;
// var dataAry = new Array
// for(let i = 0; i <7; i++) {
let nextWeekFirstDatysss = new Date(endTime );
// let y: any = nextWeekFirstDaty.getFullYear();
// let m: any = nextWeekFirstDaty.getMonth() + 1;
// let d: any = nextWeekFirstDaty.getDate();
// dataAry.push([y,m,d])
// }
console.log("获得一周的所有日期---------------->",dateStr,now.getDay(),day,nextWeekFirstDatysss,endTime)
let currentTime = DateClass.getCurrent()
const dateArray: dateBase[] = [];
for(let i = 0; i <7; i++) {
let nextWeekFirstDaty = new Date(endTime + 86400000*(i+1) );
let y: any = nextWeekFirstDaty.getFullYear();
let m: any = nextWeekFirstDaty.getMonth() + 1;
let d: any = nextWeekFirstDaty.getDate();
const lun = DateClass.getLunars(y, m, d);
const l = lun.split('-');
console.log("获得一周的所有日期",i,d,endTime + 86400000*(i+1))
dateArray.push({
title: d,
isCurrent: true,
isHolidays: DateClass.getHolidays([y, m, d + i]),
isWorks: DateClass.getWorks([y, m, d - i]),
date: `${y}-${clockFactory(m)}-${clockFactory(d + i)}`,
lunars: lun,
lunarsChinese:
DateClass.toChinaMonth(Number(l[1])) + DateClass.toChinaDay(Number(l[2])),
lunarsChina: DateClass.toChinaDay(Number(l[2])),
isNow: currentTime[2] === d ? true : false,
solarDay: DateClass.getSolarDay(m, d + i),
lunarDay: DateClass.getlunarDay(Number(l[0]), Number(l[1]), Number(l[2])),
animal: DateClass.getAnimal(Number(l[0])),
astro: DateClass.toAstro(y, m, d + i),
term: getTerm(Number(l[0]), m, d + i),
});
}
return dateArray
}
}
export default new Calendar();

36
src/api/calendar/DateClass.ts

@ -98,8 +98,11 @@ class DateClass {
* @returns {string}
*/
toChinaDay(d: number) {
let str = d == 10 ? constValue.nStr2[0] : constValue.nStr2[Math.floor(d / 10)];
return str + (d % 10 ? constValue.nStr5[d % 10] : constValue.nStr5[10]);
// console.log('返回农历日期通俗表示法',d,str)
return str + (d % 10 ? constValue.nStr1[d % 10] : constValue.nStr1[10]);
}
/**
*
@ -322,6 +325,12 @@ class DateClass {
moveTime(y: number, m: number, d: number,t?:number){
switch(t){
case 2:
let startWeek = this.getMonday(y,m,d,'s',1)
let endWeek = this.getMonday(y,m,d,'e',1)
return {
start:startWeek,
end:endWeek
}
break;
case 3:
break;
@ -348,12 +357,12 @@ class DateClass {
@ 功能: 处理年月日回退数据
@ 1: 23
*/
gobackTime(y: number, m: number, d: number,t?:number){
gobackTime(y: number, m: number, d: number,t?:number, dt?:number){
// console.log("计算时间--0--》",y,m,d,t)
switch(t){
case 2:
let startWeek = this.getMonday(y,m,d,'s',-1)
let endWeek = this.getMonday(y,m,d,'e',-1)
let startWeek = this.getMonday(y,m,d,'s',dt?dt:0)
let endWeek = this.getMonday(y,m,d,'e',dt?dt:0)
return {
start:startWeek,
end:endWeek
@ -382,7 +391,7 @@ class DateClass {
y = y -1;
m = 12
d = this.solarMonth(y,m)
console.log("计算时间--1--》",y,m,d)
// console.log("计算时间--1--》",y,m,d)
}else{
m = month
let day = this.solarMonth(y,month)
@ -419,11 +428,7 @@ class DateClass {
// console.log("now--->",now)
// console.log("nowTime--->",nowTime)
// console.log("day--->",day)
// console.log("longTime--->",longTime)
// console.log("n--->",n)
@ -439,12 +444,19 @@ class DateClass {
let d: any = date.getDate();
// m = m < 10 ? "0" + m : m;
// d = d < 10 ? "0" + d : d;
// console.log("now--->",date)
// console.log("nowTime--->",nowTime)
// console.log("day--->",day)
// console.log("longTime--->",longTime)
// console.log("n--->",n)
let days = y + "-" + m + "-" + d;
return [y, m, d];
}
//获得上周的开始日期
// getLastWeekStartDate()
}
export default new DateClass();

6
src/components/DesignForm/app/calendar/calendar1/calendarPage.vue

@ -74,10 +74,10 @@ const backTime = () =>{
}
if(curtteDayType.value != 2){
taday.value = DateClass.gobackTime(taday.value[0],taday.value[1],taday.value[2],curtteDayType.value)
taday.value = DateClass.gobackTime(taday.value[0],taday.value[1],taday.value[2],curtteDayType.value,-1)
}else{
let weekObject = DateClass.gobackTime(taday.value.start[0],taday.value.start[1],taday.value.start[2],curtteDayType.value)
let weekObject = DateClass.gobackTime(taday.value.start[0],taday.value.start[1],taday.value.start[2],curtteDayType.value,-1)
taday.value = weekObject
}
@ -158,7 +158,7 @@ const goTady = () => {
</div>
<div class="weekNumber">
<MonthPage v-if="curtteDayType==1" :body-hight="props.bodyHight" :ta-day="taday" />
<WeekPage v-if="curtteDayType==2" :body-hight="props.bodyHight" />
<WeekPage v-if="curtteDayType==2" :body-hight="props.bodyHight" :ta-day="taday" />
<DayPage v-if="curtteDayType==3" :body-hight="props.bodyHight" />
</div>
</div>

1
src/components/DesignForm/app/calendar/calendar1/monthPage.vue

@ -46,7 +46,6 @@ const TBody = computed(() =>
);
</script>
<template>
{{props.taDay}}
<div class="monthCalendarBox" :style="'height:calc(100vh - '+ drawingBoardHeight +'px)'">
<ul class="t-calendar-header">
<li v-for="(item, index) in THeader" :key="index">

71
src/components/DesignForm/app/calendar/calendar1/weekPage.vue

@ -4,21 +4,90 @@
@ 备注:
-->
<script lang='ts' setup>
import Calendar from '@/api/calendar/Calendar';
import DateClass from '@/api/calendar/DateClass';
import { dateBase } from '@/api/calendar/Calendar';
import { clockFactory } from '@/api/calendar/utils';
const props = defineProps({
bodyHight:Number,
taDay:{
type:Array,
default() {
return [2024,7,13];
},
}
});
//
const drawingBoardHeight = computed(()=>{
return props.bodyHight + 50
})
//
const THeader = Calendar.title();
const WeekBody = computed(()=>{
console.log("画板高度--->",props.taDay.start[0]);
return Calendar.getWeekNumber(props.taDay.start[0],props.taDay.start[1],props.taDay.start[2]);
});
</script>
<template>
<div class="monthCalendarBox" :style="'height:calc(100vh - '+ drawingBoardHeight +'px)'"></div>
<div class="monthCalendarBox" :style="'height:calc(100vh - '+ drawingBoardHeight +'px)'">
<ul class="t-calendar-header">
<li v-for="(item, index) in THeader" :key="index">
{{ item }}
</li>
</ul>
<div class="t-calendar-day">
<template v-if="WeekBody.length">
<div
class="t-calendar-row"
v-for="(item, index) in WeekBody"
:key="index"
>
{{ item }}
</div>
</template>
<template v-else>
<div class="no-date">抱歉,暂无数据</div>
</template>
</div>
</div>
</template>
<style lang='scss' scoped>
.monthCalendarBox{
width: 100%;
margin-top: 10px;
.t-calendar-header {
display: flex;
width: 100%;
height: 42px;
padding: 0;
box-sizing: border-box;
li {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
font-size: 0.95rem;
}
}
.t-calendar-day {
display: flex;
width: 100%;
height: calc(100% - 42px);
padding: 0;
box-sizing: border-box;
border-right: 1px solid #ebeef5;
.t-calendar-row {
width: 100%;
font-size: 0.95rem;
border-bottom: 1px solid #ebeef5;
border-top: 1px solid #ebeef5;
border-left: 1px solid #ebeef5;
}
}
}
</style>

6
src/types/components.d.ts

@ -38,7 +38,6 @@ declare module '@vue/runtime-core' {
ElCard: typeof import('element-plus/es')['ElCard']
ElCarousel: typeof import('element-plus/es')['ElCarousel']
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
ElCascader: typeof import('element-plus/es')['ElCascader']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
ElCol: typeof import('element-plus/es')['ElCol']
@ -63,7 +62,6 @@ declare module '@vue/runtime-core' {
ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
ElInput: typeof import('element-plus/es')['ElInput']
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElLink: typeof import('element-plus/es')['ElLink']
ElMain: typeof import('element-plus/es')['ElMain']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
@ -71,7 +69,6 @@ declare module '@vue/runtime-core' {
ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
ElPopover: typeof import('element-plus/es')['ElPopover']
ElProgress: typeof import('element-plus/es')['ElProgress']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
@ -127,16 +124,13 @@ declare module '@vue/runtime-core' {
IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
IEpClose: typeof import('~icons/ep/close')['default']
IEpCollection: typeof import('~icons/ep/collection')['default']
IEpDelete: typeof import('~icons/ep/delete')['default']
IEpEdit: typeof import('~icons/ep/edit')['default']
IEpMessageBox: typeof import('~icons/ep/message-box')['default']
IEpPicture: typeof import('~icons/ep/picture')['default']
IEpPlus: typeof import('~icons/ep/plus')['default']
IEpRefresh: typeof import('~icons/ep/refresh')['default']
IEpSearch: typeof import('~icons/ep/search')['default']
IEpSetting: typeof import('~icons/ep/setting')['default']
IEpView: typeof import('~icons/ep/view')['default']
LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
LayoutPage: typeof import('./../components/DesignForm/layoutPage/index.vue')['default']
List: typeof import('./../components/DesignForm/public/form/components/list.vue')['default']

Loading…
Cancel
Save