13 changed files with 1055 additions and 67 deletions
@ -0,0 +1,222 @@ |
|||||
|
<script lang="ts" setup> |
||||
|
import { PropType } from 'vue'; |
||||
|
import DateClass from '@/api/calendar/DateClass'; |
||||
|
import { dateBase } from '@/api/calendar/Calendar'; |
||||
|
const props = defineProps({ |
||||
|
col: { |
||||
|
type: Object as PropType<dateBase>, |
||||
|
default: () => { |
||||
|
return {}; |
||||
|
}, |
||||
|
}, |
||||
|
time: { |
||||
|
type: String, |
||||
|
default: '', |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
const isCurrentMonth = (time: string) => { |
||||
|
const months = time.split('-')[1]; |
||||
|
return DateClass.getCurrent()[1] === Number(months); |
||||
|
} |
||||
|
|
||||
|
const emit = defineEmits(['changeTargetDate']); |
||||
|
const changeTargetDate = (time: dateBase) => { |
||||
|
emit('changeTargetDate', time); |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-07-16 10:32:41 |
||||
|
@ 功能: 搜索数据 |
||||
|
*/ |
||||
|
const searchtData = (val:any,time?:any) => { |
||||
|
return time |
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<div |
||||
|
class="calendar-item-container" |
||||
|
:class="[ |
||||
|
{ |
||||
|
'is-current': col.isCurrent, |
||||
|
'is-holidays': col.isHolidays, |
||||
|
'is-week': col.isWeek, |
||||
|
'is-selected': col.date === props.time, |
||||
|
'is-current-month': isCurrentMonth(col.date), |
||||
|
}, |
||||
|
]" |
||||
|
@click="changeTargetDate(col)" |
||||
|
> |
||||
|
<div class="dayStyle"> |
||||
|
<span >{{ col.title }}</span> |
||||
|
<div v-if="col.isHolidays">休</div> |
||||
|
<span >{{ col.lunarsChina }}</span> |
||||
|
</div> |
||||
|
<div class="dayList"> |
||||
|
<div class="dayLogCont">Squeezed by parent element</div> |
||||
|
<div class="dayLogCont"> |
||||
|
{{ searchtData(1,col)}} |
||||
|
</div> |
||||
|
<div class="dayLogCont"> |
||||
|
{{ searchtData(1,col)}} |
||||
|
</div> |
||||
|
<div class="dayLogCont"> |
||||
|
{{ searchtData(1,col)}} |
||||
|
</div> |
||||
|
<div class="dayLogCont"> |
||||
|
{{ searchtData(1,col)}} |
||||
|
</div> |
||||
|
<div class="dayLogCont"> |
||||
|
{{ searchtData(1,col)}} |
||||
|
</div> |
||||
|
<div class="dayLogCont"> |
||||
|
{{ searchtData(1,col)}} |
||||
|
</div> |
||||
|
<div class="dayLogCont"> |
||||
|
{{ searchtData(1,col)}} |
||||
|
</div> |
||||
|
<div class="dayLogCont"> |
||||
|
{{ searchtData(1,col)}} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<style scoped lang="less"> |
||||
|
.calendar-item-container { |
||||
|
|
||||
|
|
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
flex-direction: column; |
||||
|
box-sizing: border-box; |
||||
|
border-radius: 6px; |
||||
|
border: 2px solid #ffffff; |
||||
|
|
||||
|
.dayList{ |
||||
|
height: calc(100% - 20px); |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
.dayLogCont{ |
||||
|
white-space: nowrap; /* 确保文本在一行内显示 */ |
||||
|
overflow: hidden; /* 隐藏溢出的内容 */ |
||||
|
text-overflow: ellipsis; /* 使用省略号表示文本溢出 */ |
||||
|
font-size: 0.95rem; |
||||
|
border: 1px solid #bcbcbc; |
||||
|
border-radius: 5px; |
||||
|
margin-bottom:5px; |
||||
|
padding: 0 5px; |
||||
|
} |
||||
|
.dayStyle{ |
||||
|
display: flex; |
||||
|
// align-items: top; |
||||
|
justify-content: space-between; |
||||
|
font-size: 12px; |
||||
|
color: #999999; |
||||
|
|
||||
|
} |
||||
|
.calendar-title { |
||||
|
font-size: 1.2rem; |
||||
|
color: #999999; |
||||
|
} |
||||
|
.calendar-lunar { |
||||
|
margin-top: 6px; |
||||
|
|
||||
|
font-size: 0.85rem; |
||||
|
color: #bcbcbc; |
||||
|
} |
||||
|
transition: all 0.2s; |
||||
|
} |
||||
|
.calendar-item-container:hover { |
||||
|
cursor: pointer; |
||||
|
border: 2px solid #409eff; |
||||
|
} |
||||
|
.is-holidays { |
||||
|
.holidays-text { |
||||
|
position: absolute; |
||||
|
top: 6px; |
||||
|
left: 14px; |
||||
|
font-size: 0.85rem; |
||||
|
color: #ffa2a2; |
||||
|
} |
||||
|
.calendar-title { |
||||
|
color: #ffa2a2; |
||||
|
} |
||||
|
.dayStyle{ |
||||
|
color: #ffa2a2; |
||||
|
} |
||||
|
background-color: #feeeef; |
||||
|
} |
||||
|
.is-selected { |
||||
|
border: 2px solid #409eff; |
||||
|
} |
||||
|
.is-holidays.is-selected { |
||||
|
border: 2px solid #ffa2a2; |
||||
|
} |
||||
|
.is-selected.is-current-month { |
||||
|
border: 2px solid #409eff; |
||||
|
} |
||||
|
.is-holidays.is-selected.is-current-month { |
||||
|
border: 2px solid #f62b2b; |
||||
|
} |
||||
|
.is-week { |
||||
|
.calendar-title { |
||||
|
color: #ffa2a2; |
||||
|
} |
||||
|
.dayStyle{ |
||||
|
color: #ffa2a2; |
||||
|
} |
||||
|
} |
||||
|
.calendar-item-container.is-current { |
||||
|
.calendar-title { |
||||
|
color: #333333; |
||||
|
} |
||||
|
.dayStyle{ |
||||
|
color: #333333; |
||||
|
} |
||||
|
.calendar-lunar { |
||||
|
color: #666666; |
||||
|
} |
||||
|
} |
||||
|
.calendar-item-container.is-current.is-holidays { |
||||
|
.holidays-text { |
||||
|
position: absolute; |
||||
|
top: 6px; |
||||
|
left: 14px; |
||||
|
font-size: 0.85rem; |
||||
|
color: #f62b2b; |
||||
|
} |
||||
|
background-color: #fbe3e4; |
||||
|
} |
||||
|
.calendar-item-container.is-current.is-holidays, |
||||
|
.calendar-item-container.is-current.is-week { |
||||
|
.calendar-title { |
||||
|
color: #f62b2b; |
||||
|
} |
||||
|
.dayStyle{ |
||||
|
color: #f62b2b; |
||||
|
} |
||||
|
} |
||||
|
.calendar-item-container.is-current.is-holidays { |
||||
|
.holidays-text { |
||||
|
position: absolute; |
||||
|
top: 6px; |
||||
|
left: 14px; |
||||
|
font-size: 0.85rem; |
||||
|
color: #fb4949; |
||||
|
} |
||||
|
.calendar-title { |
||||
|
color: #fb6e6e; |
||||
|
} |
||||
|
.dayStyle{ |
||||
|
color: #fb6e6e; |
||||
|
} |
||||
|
background-color: #ffe4e7; |
||||
|
} |
||||
|
.calendar-item-container.is-holidays:hover { |
||||
|
border: 2px solid #f62b2b; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,153 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-07-13 09:34:47 |
||||
|
@ 备注: 日日历 |
||||
|
--> |
||||
|
<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]; |
||||
|
}, |
||||
|
}, |
||||
|
searchSend:{ |
||||
|
type:Object, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
//画板高度 |
||||
|
const drawingBoardHeight = computed(()=>{ |
||||
|
return props.bodyHight + 50 |
||||
|
}) |
||||
|
|
||||
|
const curttWeek = computed(()=>{ |
||||
|
console.log("画板高度---------->",props.taDay[0]) |
||||
|
return DateClass.getWeek(DateClass.solarWeek(props.taDay[0],props.taDay[1],props.taDay[2])) |
||||
|
}) |
||||
|
|
||||
|
|
||||
|
const dayInfo = ref<any>(); |
||||
|
|
||||
|
onMounted(()=>{ |
||||
|
dayInfo.value = Calendar.gainOneDay(props.taDay[0],props.taDay[1],props.taDay[2]) |
||||
|
console.log("初次加载",dayInfo.value,props.searchSend) |
||||
|
searchatDayList(props.searchSend) |
||||
|
nextTick(()=>{ |
||||
|
|
||||
|
let ddTime = DateClass.getCurrent() |
||||
|
selectedTime.value = ddTime[0] + "-" + clockFactory(ddTime[1]) + "-" + clockFactory(ddTime[2]) |
||||
|
}) |
||||
|
}) |
||||
|
|
||||
|
watch(()=>props.taDay,(val:any)=>{ |
||||
|
dayInfo.value = Calendar.gainOneDay(val[0],val[1],val[2]) |
||||
|
console.log("监听变化",dayInfo.value) |
||||
|
searchatDayList(props.searchSend) |
||||
|
},{ |
||||
|
deep: true, |
||||
|
}) |
||||
|
|
||||
|
const selectedTime = ref(props.taDay[0] + "-" + clockFactory(props.taDay[1]) + "-" + clockFactory(props.taDay[2])) |
||||
|
const emit = defineEmits(['getDate']); |
||||
|
const changeDate = (time: dateBase) => { |
||||
|
selectedTime.value = time.date; |
||||
|
emit('getDate', time); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-07-16 11:53:35 |
||||
|
@ 功能: 获取数据 |
||||
|
*/ |
||||
|
const searchatDayList = (val:any) => { |
||||
|
val.viewClass = { |
||||
|
class:"date", |
||||
|
sortWord:"creater_time", |
||||
|
sort:1, |
||||
|
startTime:"", |
||||
|
endTime:"", |
||||
|
dayType:"", |
||||
|
mapWord:"" |
||||
|
} |
||||
|
console.log("获取每天数据",val) |
||||
|
let sendInfo = { |
||||
|
search:val, |
||||
|
timeAry:[dayInfo.value] |
||||
|
} |
||||
|
console.log("获取每天数据条件",sendInfo) |
||||
|
} |
||||
|
defineExpose({ |
||||
|
searchatDayList |
||||
|
}) |
||||
|
</script> |
||||
|
<template> |
||||
|
<div class="monthCalendarBox" :style="'height:calc(100vh - '+ drawingBoardHeight +'px)'"> |
||||
|
<ul class="t-calendar-header"> |
||||
|
<li> |
||||
|
{{ curttWeek }} |
||||
|
</li> |
||||
|
</ul> |
||||
|
<div class="t-calendar-day"> |
||||
|
<template v-if="dayInfo"> |
||||
|
<div |
||||
|
class="t-calendar-row" |
||||
|
> |
||||
|
<CalendarItem |
||||
|
:col="dayInfo" |
||||
|
:time="selectedTime" |
||||
|
@changeTargetDate="changeDate" |
||||
|
></CalendarItem> |
||||
|
</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> |
||||
@ -0,0 +1,129 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-07-13 09:34:05 |
||||
|
@ 备注: 月日历 |
||||
|
--> |
||||
|
<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'; |
||||
|
|
||||
|
import CalendarItem from './calendarItem.vue'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
bodyHight:Number, |
||||
|
taDay:{ |
||||
|
type:Array, |
||||
|
default() { |
||||
|
return [2024,7,13]; |
||||
|
}, |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
onMounted(()=>{ |
||||
|
nextTick(()=>{ |
||||
|
selectedTime.value = props.taDay[0] + "-" + clockFactory(props.taDay[1]) + "-" + clockFactory(props.taDay[2]) |
||||
|
}) |
||||
|
}) |
||||
|
|
||||
|
|
||||
|
const selectedTime = ref(props.taDay[0] + "-" + clockFactory(props.taDay[1]) + "-" + clockFactory(props.taDay[2])) |
||||
|
const emit = defineEmits(['getDate']); |
||||
|
const changeDate = (time: dateBase) => { |
||||
|
selectedTime.value = time.date; |
||||
|
emit('getDate', time); |
||||
|
} |
||||
|
//画板高度 |
||||
|
const drawingBoardHeight = computed(()=>{ |
||||
|
return props.bodyHight + 50 |
||||
|
}) |
||||
|
//周期 |
||||
|
const THeader = Calendar.title(); |
||||
|
//日期 |
||||
|
const TBody = computed(() => |
||||
|
Calendar.table(props.taDay) |
||||
|
); |
||||
|
</script> |
||||
|
<template> |
||||
|
<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="TBody.length"> |
||||
|
<div |
||||
|
class="t-calendar-row" |
||||
|
v-for="(item, index) in TBody" |
||||
|
:key="index" |
||||
|
> |
||||
|
<div |
||||
|
class="t-calendar-col" |
||||
|
v-for="(col, colIdx) in item" |
||||
|
:key="colIdx" |
||||
|
> |
||||
|
<CalendarItem |
||||
|
:col="col" |
||||
|
:time="selectedTime" |
||||
|
@changeTargetDate="changeDate" |
||||
|
></CalendarItem> |
||||
|
</div> |
||||
|
</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; |
||||
|
flex-direction: column; |
||||
|
width: 100%; |
||||
|
height: calc(100% - 42px); |
||||
|
.t-calendar-row { |
||||
|
width: 100%; |
||||
|
height: 60px; |
||||
|
display: flex; |
||||
|
flex: 1; |
||||
|
border-bottom: 1px solid #ebeef5; |
||||
|
.t-calendar-col{ |
||||
|
box-sizing: border-box; |
||||
|
flex: 1; |
||||
|
border-left: 1px solid #ebeef5; |
||||
|
padding: 2px; |
||||
|
font-size: 16px; |
||||
|
transition: all 0.2s; |
||||
|
width: calc(100%/7); |
||||
|
} |
||||
|
.t-calendar-col:last-child { |
||||
|
border-right: 1px solid #ebeef5; |
||||
|
} |
||||
|
} |
||||
|
.t-calendar-row:first-child { |
||||
|
border-top: 1px solid #ebeef5; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,110 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-07-13 09:34:24 |
||||
|
@ 备注: 周 |
||||
|
--> |
||||
|
<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(()=>{ |
||||
|
Calendar.gainDayOfWeek(props.taDay.start[0],props.taDay.start[1],props.taDay.start[2]); |
||||
|
console.log("画板高度--->",props.taDay.start[0]); |
||||
|
return Calendar.gainDayOfWeek(props.taDay.start[0],props.taDay.start[1],props.taDay.start[2]); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
onMounted(()=>{ |
||||
|
nextTick(()=>{ |
||||
|
let ddTime = DateClass.getCurrent() |
||||
|
selectedTime.value = ddTime[0] + "-" + clockFactory(ddTime[1]) + "-" + clockFactory(ddTime[2]) |
||||
|
}) |
||||
|
}) |
||||
|
const selectedTime = ref(props.taDay[0] + "-" + clockFactory(props.taDay[1]) + "-" + clockFactory(props.taDay[2])) |
||||
|
const emit = defineEmits(['getDate']); |
||||
|
const changeDate = (time: dateBase) => { |
||||
|
selectedTime.value = time.date; |
||||
|
emit('getDate', time); |
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<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" |
||||
|
> |
||||
|
<CalendarItem |
||||
|
:col="item" |
||||
|
:time="selectedTime" |
||||
|
@changeTargetDate="changeDate" |
||||
|
></CalendarItem> |
||||
|
</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: calc(100%/7); |
||||
|
|
||||
|
font-size: 0.95rem; |
||||
|
border-bottom: 1px solid #ebeef5; |
||||
|
border-top: 1px solid #ebeef5; |
||||
|
border-left: 1px solid #ebeef5; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue