feiniao-farm-h5/src/views/old_mini/task_condition/components/calendar.vue

<template>
    <div class="calendar">
        <div class="header-wrap">
            <div class="header-l">
                <div class="top-l">
                    <el-icon class="icon icon-l" color="#999999" size="11" @click="prevPeriod"><ArrowLeftBold /></el-icon>
                    <!-- <span class="top-tag red" v-if="expiredCounts">{{ expiredCounts }}过期</span> -->
                </div>
                <div class="top-c">
                    <span class="header-text">
                        {{ dateRange.start }} <span class="center-line">-</span> {{ dateRange.end }}
                    </span>
                </div>
                <div class="top-r">
                    <span class="top-tag orange" v-if="completedCounts">{{ completedCounts }}待完成</span>
                    <el-icon class="icon icon-r" color="#999999" size="11" @click="nextPeriod"><ArrowRightBold /></el-icon>
                </div>

            </div>
            <!-- <div class="header-r">
                <span class="line"></span>
                高温预警
            </div> -->
        </div>
        <div class="days">
            <div
                class="days-item"
                v-for="(day, index) in calendarDays"
                :key="index"
                :class="[{ activeDay: activeDay === day.date, today: day.isToday && !day.solarTerm }]"
                @click="selectDate(day.date, day)"
            >
                <div class="day-box">
                    <span class="days-week">{{ day.isToday ? "今天" : `周${day.dayOfWeek}` }}</span>
                    <span class="days-one">{{ day.day }}</span>
                </div>
                <div v-if="day.solarTerm" class="solar-term">{{ day.solarTerm }}</div>
                <div v-if="day.typeName" class="type-num">{{ day.typeName.lengthVal }}</div>
                <!-- <div v-if="day.isHeatWarning" class="heat-warning"></div>
                <div v-if="day.typeName" class="type-name">
                    <div class="type-text">{{ day.typeName.farmWorkName }}</div>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onDeactivated, onMounted } from "vue";
import solarLunar from "solarlunar";
// const props = defineProps({
//     calendarWorkList: {
//         type: Array,
//         required: true,
//     },
// });

const today = new Date();
// const startDate = ref(getAlignedStartDate(today));
const startDate = ref(new Date(today));
// 定义星期几的名称
const weekdays = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
const weekdaysShort = ["一", "二", "三", "四", "五", "六", "日"];
// 存储任务列表数据
const taskListData = ref([]);

const days = computed(() => {
    return Array.from({ length: 7 }, (_, i) => {
        const date = new Date(startDate.value);
        date.setDate(startDate.value.getDate() + i);
        return date;
    });
});

const calendarDays = computed(() => {
    const daysList = [];
    for (let i = 0; i < days.value.length; i++) {
        const date = days.value[i];
        const dayOfWeek = date.getDay(); // 0是周日，1是周一，...，6是周六
        // 调整显示：周一显示为"一"，周二显示为"二"，...，周日显示为"日"
        const displayDayOfWeek = dayOfWeek === 0 ? "日" : weekdaysShort[dayOfWeek - 1];

        // 获取该日期的节气
        const solarTerm = getSolarTerm(date);
        // 获取该日期的农事数据
        const typeName = getTaskByDate(formatDate(date));

        daysList.push({
            day: date.getDate(),
            date: formatDate(date),
            isToday: formatDate(date) === formatDate(today),
            dayOfWeek: displayDayOfWeek,
            solarTerm: solarTerm, // 使用真实计算的节气数据
            isHeatWarning: i === 5,
            typeName: typeName, // 使用传入的任务数据
        });
    }
    return daysList;
});

// 根据日期获取农事数据
function getTaskByDate(dateStr) {
    if (!taskListData.value || taskListData.value.length === 0) {
        return null;
    }
    // 查找匹配日期的农事
    const matchedTasks = taskListData.value.filter(task => {
        if (!task.executeDate) return false;
        // 格式化日期字符串进行比较（确保格式一致）
        const taskDate = formatDate(new Date(task.executeDate));
        return taskDate === dateStr;
    });

    if (matchedTasks.length === 0) {
        return null;
    }

    // const farmWorkNames = matchedTasks.map(task => task.farmWorkName || '').filter(Boolean);
    return {
        lengthVal: matchedTasks.length,
        // farmWorkName: farmWorkNames.length > 1 ? farmWorkNames.join('、') : farmWorkNames[0] || ''
    };
}

function setSolarTerm(taskList) {
    // 存储任务列表数据
    taskListData.value = taskList || [];
    // 为每个任务计算节气
    for (let item of taskListData.value) {
        if (item.executeDate) {
            item.solarTerm = getSolarTerm(new Date(item.executeDate));
        }
    }
}

const expiredCounts = ref(0);
const completedCounts = ref(0);
function setCounts(index, counts) {
    if (index === 2) {
        completedCounts.value = counts;
    } else if (index === 3) {
        expiredCounts.value = counts;
    }
}

// 清除选中状态
const clearSelection = () => {
    activeDay.value = null;
    selectedDate.value = null;
};

defineExpose({
    setSolarTerm,
    setCounts,
    clearSelection
});

const dateRange = computed(() => {
    let start = calendarDays.value[0].date;
    start = start.replace(/-/g, ".");
    let end = calendarDays.value[6].date;
    end = end.replace(/^\d{4}-(\d{2})-(\d{2})$/, "$1.$2");
    return { start, end };
});

function getAlignedStartDate(referenceDate) {
    const start = new Date(referenceDate);
    const dayOfWeek = start.getDay();
    start.setDate(start.getDate() - dayOfWeek + (dayOfWeek === 0 ? -13 : 1)); // 对齐至周一，确保21天周期合理
    return start;
}

function formatDate(date) {
    // String(currentMonth.value).padStart(2, "0")
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(
        2,
        "0"
    )}`;
}

// 获取指定日期的节气
function getSolarTerm(date) {
    try {
        const year = date.getFullYear();
        const month = date.getMonth() + 1; // getMonth() 返回 0-11，需要加1
        const day = date.getDate();
        const lunar = solarLunar.solar2lunar(year, month, day);
        // lunar.term 返回节气名称，如果没有节气则返回空字符串
        return lunar.term || null;
    } catch (error) {
        console.error("获取节气失败:", error);
        return null;
    }
}

function prevPeriod() {
    startDate.value.setDate(startDate.value.getDate() - 7);
    startDate.value = new Date(startDate.value);
}

function nextPeriod() {
    startDate.value.setDate(startDate.value.getDate() + 7);
    startDate.value = new Date(startDate.value);
}

const activeDay = ref(null);
const emit = defineEmits(['dateSelect']);

const selectDate = (date, day) => {
    // 如果点击的是已选中的日期，取消选中
    if (activeDay.value === date) {
        activeDay.value = null;
        selectedDate.value = null;
        emit('dateSelect', null); // 传递 null 表示取消筛选
    } else {
        activeDay.value = date;
        selectedDate.value = `${date} (${day.dayOfWeek})`;
        emit('dateSelect', date); // 传递选中的日期
    }
};

// 初始化时不选择任何日期（默认不选中）
// onMounted(() => {
//     selectDate(formatDate(today), {
//         day: today.getDate(),
//         dayOfWeek: weekdaysShort[today.getDay() === 0 ? 6 : today.getDay() - 1],
//     });
// });

function closeDialog() {
    activeDay.value = null;
}
const selectedDate = ref(null);
</script>

<style lang="scss" scoped>
.calendar {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    .header-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        .header-l {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            .top-c {
                flex: 1;
                text-align: center;
            }
            .header-text {
                color: #000;
                font-size: 16px;
                font-weight: bold;
                .center-line {
                    position: relative;
                    top: -3px;
                }
            }
            .icon {
                width: 20px;
                height: 20px;
                background: #F2F3F5;
                border-radius: 50%;
                text-align: center;
                line-height: 20px;
                &.icon-l {
                    margin-right: 2px;
                }
                &.icon-r {
                    margin-left: 2px;
                }
            }
            .top-tag {
                font-size: 12px;
                padding: 0 8px;
                height: 20px;
                line-height: 20px;
                border-radius: 20px;
                &.red {
                    color: #FF0000;
                    background: rgba(255, 0, 0, 0.1);
                }
                &.orange {
                    color: #FF790B;
                    background: rgba(255, 149, 61, 0.2);
                }
            }
        }
        .header-r {
            background: rgba(252, 138, 44, 0.12);
            padding: 6px 10px;
            border-radius: 28px;
            color: #fc8a2c;
            display: inline-flex;
            align-items: center;
            font-size: 10px;
            .line {
                width: 12px;
                height: 1px;
                margin-right: 5px;
                background: #fc8a2c;
            }
        }
    }
}

.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-size: 12px;
}
.days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    // gap: 5px;
    font-size: 12px;
    .days-item + .days-item {
        margin-left: 6px;
    }
    .days-item {
        cursor: pointer;
        position: relative;
        &.today {
            min-height: 70px;
            .day-box {
                color: #2199f8;
            }
        }

        &.activeDay {
            .day-box {
                color: #fff;
                background: linear-gradient(136deg, #9fd5ff, #2199f8);
            }
        }
        .day-box {
            background: #ffffff;
            color: #000;
            border-radius: 8px;
            padding: 7px 0;
            position: relative;
            .days-week {
                font-size: 12px;
            }
        }
        .solar-term {
            padding-top: 3px;
            color: #8D8D8D;
            font-size: 12px;
        }
        .type-num {
            position: absolute;
            top: -5px;
            right: -5px;
            color: #fff;
            font-size: 10px;
            background: #2199F8;
            width: 14px;
            height: 14px;
            line-height: 16px;
            border-radius: 50%;
        }
        .days-one {
            text-align: center;
            display: block;
            margin: 0 auto;
            font-size: 14px;
            line-height: 16px;
            font-weight: bold;
            padding-top: 2px;
            // width: 32px;
            // height: 32px;
            // line-height: 32px;
            // border-radius: 50%;
        }
        .type-name {
            font-size: 10px;
            position: relative;
            top: -4px;
            border-radius: 12px;
            position: relative;
            background: #fff;
            padding-top: 2px;
            .type-text {
                border-radius: 12px;
                padding: 2px;
            }
        }
    }
}
.today {
    position: relative;
    &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto;
        width: 10px;
        height: 10px;
        background: url("@/assets/img/home/today.png") no-repeat center center / 100% 100%;
    }
    &.no-type {
        &::after {
            bottom: 14px;
        }
    }
}
</style>