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