ShutongInterconnectedChemicalCloudPlatform/src/components/DesignForm/app/calendar/calendar1/dayPage.vue

<!--
@ 作者: 秦东
@ 时间: 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';
import { gainCalendarList } from '@/api/calendar/request';

const props = defineProps({
	bodyHight:Number,
	taDay:{
		type:Array,
		default() {
			return [2024,7,13];
		},
	},
	searchSend:{
		type:Object,
		default(){
			return {}
		}
	},
	drawerWith:{
		type:Number,
		default:0
	}
});

//画板高度
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);
}
const loadDay = ref(false)

/**
@ 作者: 秦东
@ 时间: 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)
	gainCalendarList(sendInfo)
		.then(({data})=>{
			// console.log("获取数据",data)
			dayInfo.value = data
		})
		.finally(()=>{ loadDay.value = false })
}
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"  v-loading="loadDay">
			<template v-if="dayInfo">
				<div
                    class="t-calendar-row"
                >
				<CalendarItem
                    :col="dayInfo"
                    :time="selectedTime"
					:drawer-with="props.drawerWith"
                    @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>