feiniao-farm-h5/src/components/pageComponents/FarmWorkPlanTimeline.vue

<template>
    <div class="timeline-container" ref="timelineContainerRef">
        <div class="timeline-list" ref="timelineListRef">
            <div class="timeline-middle-line"></div>
            <div
                v-for="(t, tIdx) in solarTerms"
                :key="`term-${uniqueTimestamp}-${tIdx}`"
                class="timeline-term"
                :style="getTermStyle(t, tIdx)"
            >
                <span class="term-name">{{ t.displayName }}</span>
            </div>
            <div v-for="(p, idx) in phenologyList" :key="`phenology-${uniqueTimestamp}-${idx}`" class="phenology-bar">
                <div
                    v-for="(r, rIdx) in Array.isArray(p.reproductiveList) ? p.reproductiveList : []"
                    :key="`reproductive-${uniqueTimestamp}-${idx}-${rIdx}`"
                    class="reproductive-item"
                >
                    <div class="arranges">
                        <div
                            v-for="(fw, aIdx) in Array.isArray(r.farmWorkArrangeList) ? r.farmWorkArrangeList : []"
                            :key="`arrange-${uniqueTimestamp}-${idx}-${rIdx}-${aIdx}`"
                            class="arrange-card"
                            :style="
                                shouldShowIncompleteStatus(fw.farmWorkId)
                                    ? 'padding-bottom: 18px;'
                                    : 'padding-bottom: 10px'
                            "
                            :class="getArrangeStatusClass(fw)"
                            @click="handleRowClick(fw)"
                        >
                            <div class="card-header">
                                <div class="header-left">
                                    <span class="farm-work-name">{{ fw.farmWorkName || "--" }}</span>
                                    <span class="tag-standard">{{ farmWorkType[fw.type] }}</span>
                                </div>
                                <div class="header-right" v-if="!isStandard">
                                    {{ fw.isFollow == 1 ? "已关注" : fw.isFollow == 2 ? "托管农事" : "" }}
                                </div>
                            </div>
                            <div class="card-content">
                                <span>{{ fw.interactionQuestion || "暂无提示" }}</span>
                                <span
                                    v-if="!disableClick"
                                    :class="shouldShowIncompleteStatus(fw.farmWorkId) ? 'link-warning' : 'edit-link'"
                                    @click.stop="handleEdit(fw)"
                                    >点击编辑</span
                                >
                            </div>
                            <div class="card-status" v-if="shouldShowIncompleteStatus(fw.farmWorkId)">
                                <el-icon color="#FF953D" size="13"><WarningFilled /></el-icon>
                                <span>未完善</span>
                            </div>
                        </div>
                    </div>
                    <div class="phenology-name">{{ r.name }}</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 互动设置弹窗 -->
    <interact-popup ref="interactPopupRef" @handleSaveSuccess="updateFarmWorkPlan"></interact-popup>
</template>

<script setup>
import { ref, nextTick, watch, onMounted, onUnmounted } from "vue";
import interactPopup from "@/components/popup/interactPopup.vue";
import { ElMessage } from "element-plus";
import { WarningFilled } from "@element-plus/icons-vue";

const props = defineProps({
    // 农场 ID，用于请求农事规划数据
    farmId: {
        type: [String, Number],
        default: null,
    },
    // 页面类型：种植方案 / 农事规划，用来控制高度样式
    pageType: {
        type: String,
        default: "",
    },
    // 是否禁用所有点击事件（用于只读展示）
    disableClick: {
        type: Boolean,
        default: false,
    },
    containerId: {
        type: [Number, String],
        default: null,
    },
    // 是否是标准农事
    isStandard: {
        type: Boolean,
        default: false,
    },
    // 方案ID
    schemeId: {
        type: [Number, String],
        default: null,
    },
});

const farmWorkType = {
    0: "预警农事",
    1: "标准农事",
    2: "建议农事",
    3: "自建农事",
};

const emits = defineEmits(["row-click"]);

const solarTerms = ref([]);
const phenologyList = ref([]);
const timelineContainerRef = ref(null);
const timelineListRef = ref(null);
// 标记是否为首次加载
const isInitialLoad = ref(true);
// 存储timeline-list的实际渲染高度
const timelineListHeight = ref(0);
// 生成唯一的时间戳，用于确保key的唯一性
const uniqueTimestamp = ref(Date.now());
// ResizeObserver 实例，用于监听高度变化
let resizeObserver = null;

// 获取当前季节
const getCurrentSeason = () => {
    const month = new Date().getMonth() + 1; // 1-12
    if (month >= 3 && month <= 5) {
        return "spring"; // 春季：3-5月
    } else if (month >= 6 && month <= 8) {
        return "summer"; // 夏季：6-8月
    } else if (month >= 9 && month <= 10) {
        return "autumn"; // 秋季：9-10月
    } else {
        return "winter"; // 冬季：11-2月
    }
};

// 安全解析时间到时间戳（ms）
const safeParseDate = (val) => {
    if (!val) return NaN;
    if (val instanceof Date) return val.getTime();
    if (typeof val === "number") return val;
    if (typeof val === "string") {
        // 兼容 "YYYY-MM-DD HH:mm:ss" -> Safari
        const s = val.replace(/-/g, "/").replace("T", " ");
        const d = new Date(s);
        return isNaN(d.getTime()) ? NaN : d.getTime();
    }
    return NaN;
};

const batchValidateData = ref({});
const allTrue = ref(false);
const invalidIds = ref([]);
const invalidArr = ref([]);
// 验证农事卡片药肥报价信息是否完整
const batchValidatePesticideFertilizerQuotes = (ids, items) => {
    if (props.isStandard) {
        return;
    }
    VE_API.monitor
        .batchValidatePesticideFertilizerQuotes({ ids, schemeId: props.schemeId })
        .then(({ data, code }) => {
            if (code === 0) {
                batchValidateData.value = data || {};
                allTrue.value = Object.values(data).every((value) => value === true);
                invalidIds.value = Object.keys(data).filter((key) => data[key] !== true);

                // 清空之前的arrangeIds
                invalidArr.value = [];
                // 遍历items，判断farmWorkId是否在invalidIds中，如果对应上了就把item.id push进去
                items.forEach((item) => {
                    // 判断item.farmWorkId是否在invalidIds数组中（需要转换为字符串进行比较）
                    const farmWorkIdStr = String(item.farmWorkId);
                    if (invalidIds.value.includes(farmWorkIdStr)) {
                        invalidArr.value.push({
                            arrangeId: item.id,
                            farmWorkId: item.farmWorkId,
                        });
                    }
                });
            }
        })
        .catch(() => {});
};

// 判断是否应该显示"未完善"状态
// 如果batchValidateData中对应的farmWorkId验证结果为true（已完善），则不显示
// 如果验证结果为false（未完善）或不存在，则显示
const shouldShowIncompleteStatus = (farmWorkId) => {
    if (!farmWorkId || !batchValidateData.value || typeof batchValidateData.value !== "object") {
        // 如果没有验证数据，默认不显示
        return false;
    }

    // 从对象中直接获取验证结果，支持字符串和数字类型的key
    const isValid =
        batchValidateData.value[farmWorkId] !== undefined
            ? batchValidateData.value[farmWorkId]
            : batchValidateData.value[String(farmWorkId)] !== undefined
            ? batchValidateData.value[String(farmWorkId)]
            : undefined;

    // 如果找到了验证结果
    if (isValid !== undefined) {
        // 如果验证结果为true（已完善），返回false（不显示）
        // 如果验证结果为false（未完善），返回true（显示）
        return !isValid;
    }

    // 如果没有找到验证结果，默认不显示
    return false;
};

// 计算物候期需要的实际高度（基于农事数量）
const getPhenologyRequiredHeight = (item) => {
    // 统计该物候期内的农事数量
    let farmWorkCount = 0;

    if (Array.isArray(item.reproductiveList)) {
        item.reproductiveList.forEach((reproductive) => {
            if (Array.isArray(reproductive.farmWorkArrangeList)) {
                farmWorkCount += reproductive.farmWorkArrangeList.length;
            }
        });
    }

    // 如果没有农事，给一个最小高度
    if (farmWorkCount === 0) {
        return 50; // 最小50px
    }

    // 每个农事卡片的高度（根据实际内容，卡片高度可能因内容而异）
    // 卡片包含：padding(8px*2) + header(约25px) + content margin(4px+2px) + content(约25-30px) = 约72-77px
    // 考虑到内容可能换行，实际高度可能更高，设置为120px更安全，避免卡片重叠
    const farmWorkCardHeight = 120; // 卡片高度估算，确保能容纳内容且不重叠
    // 卡片之间的间距（与CSS中的gap保持一致）
    const cardGap = 12;

    // 计算总高度：卡片数量 * 卡片高度 + (卡片数量 - 1) * 间距
    // 如果有多个卡片，需要加上它们之间的间距
    const totalHeight = farmWorkCount * farmWorkCardHeight + (farmWorkCount > 1 ? (farmWorkCount - 1) * cardGap : 0);

    // 返回精确的总高度，只保留最小高度限制，不添加额外余量
    return Math.max(totalHeight, 50); // 最小50px，精确匹配农事卡片高度
};

// 计算所有物候期的累积位置和总高度
const calculatePhenologyPositions = () => {
    let currentTop = 10; // 起始位置，留出顶部间距
    const positions = new Map();

    // 按progress排序物候期，确保按时间顺序排列
    const sortedPhenologyList = [...phenologyList.value].sort((a, b) => {
        const aProgress = Math.min(Number(a?.progress) || 0, Number(a?.progress2) || 0);
        const bProgress = Math.min(Number(b?.progress) || 0, Number(b?.progress2) || 0);
        return aProgress - bProgress;
    });

    sortedPhenologyList.forEach((phenology) => {
        const height = getPhenologyRequiredHeight(phenology);
        // 使用与数据生成时相同的ID生成逻辑
        const itemId =
            phenology.id ?? phenology.phenologyId ?? phenology.name ?? `${phenology.progress}-${phenology.progress2}`;
        positions.set(itemId, {
            top: currentTop,
            height: height,
        });
        currentTop += height; // 紧挨着下一个物候期，不留间距
    });

    return {
        positions,
        totalHeight: currentTop, // 总高度 = 最后一个物候期的底部位置，不添加额外间距
    };
};

// 计算所有农事的总高度（基于物候期紧挨排列）
const calculateTotalHeightByFarmWorks = () => {
    const { totalHeight } = calculatePhenologyPositions();

    // 如果有物候期数据，直接使用计算出的总高度
    // totalHeight 已经包含了从 10 开始的起始位置和所有物候期的高度
    if (totalHeight > 10) {
        // 确保总高度至少能容纳所有节气（每个节气至少50px）
        const baseHeight = (solarTerms.value?.length || 0) * 50;
        // 返回物候期总高度和基础高度的较大值，确保节气能正常显示
        return Math.max(totalHeight, baseHeight);
    }

    // 如果没有物候期数据，返回基础高度
    const baseHeight = (solarTerms.value?.length || 0) * 50;
    return baseHeight || 100; // 至少返回100px，避免为0
};

const getTermStyle = (t, index) => {
    // 优先使用实际测量的timeline-list高度，如果没有测量到则使用计算值作为后备
    const totalHeight = timelineListHeight.value > 0 ? timelineListHeight.value : calculateTotalHeightByFarmWorks();
    // 获取节气总数
    const termCount = solarTerms.value?.length || 1;

    // 等分高度：总高度 / 节气数量
    const termHeight = totalHeight / termCount;

    // 计算top位置：索引 * 每个节气的高度
    const top = index * termHeight;

    return {
        position: "absolute",
        top: `${top}px`,
        left: 0,
        width: "30px",
        height: `${termHeight}px`, // 高度等分，使用实际测量的高度
        display: "flex",
        alignItems: "center",
    };
};

// 点击季节 → 滚动到对应节气（立春/立夏/立秋/立冬）
const handleSeasonClick = (seasonValue) => {
    const mapping = {
        spring: "立春",
        summer: "立夏",
        autumn: "立秋",
        winter: "立冬",
    };
    const targetName = mapping[seasonValue];
    if (!targetName) return;

    // 查找对应的节气
    const targetIndex = solarTerms.value.findIndex((t) => (t?.displayName || "") === targetName);
    if (targetIndex === -1) return;

    // 计算目标节气的top位置
    const totalHeight = timelineListHeight.value > 0 ? timelineListHeight.value : calculateTotalHeightByFarmWorks();
    const termCount = solarTerms.value?.length || 1;
    const termHeight = totalHeight / termCount;
    const targetTop = targetIndex * termHeight;

    // 滚动到目标位置
    const wrap = timelineContainerRef.value;
    if (!wrap) return;
    const viewH = wrap.clientHeight || 0;
    const maxScroll = Math.max(0, wrap.scrollHeight - viewH);
    // 将目标位置稍微靠上（使用 0.1 视口高度做偏移）
    let scrollTop = Math.max(0, targetTop - viewH * 0.1);
    if (scrollTop > maxScroll) scrollTop = maxScroll;
    wrap.scrollTo({ top: scrollTop, behavior: "smooth" });
};

// 农事状态样式映射（0:取消关注，1:关注，2:托管农事，）
const getArrangeStatusClass = (fw) => {
    const t = fw?.isFollow;
    const warningStatus = shouldShowIncompleteStatus(fw.farmWorkId);
    if (t == 0) return "normal-style";
    if (warningStatus) return "status-warning";
    // if (t >= 0 && t <= 4) return "status-normal";
    // if (t === 5) return "status-complete";
    return "status-normal";
};

const handleRowClick = (item) => {
    item.isEdit = shouldShowIncompleteStatus(item.farmWorkId);
    item.invalidIds = invalidIds.value;
    item.invalidArr = invalidArr.value;
    emits("row-click", item);
};

const interactPopupRef = ref(null);
const handleEdit = (item) => {
    if (props.disableClick) return;
    if (interactPopupRef.value) {
        interactPopupRef.value.showPopup(item);
    }
};

// 获取农事规划数据
const getFarmWorkPlan = () => {
    if (!props.farmId && !props.containerId) return;
    // 更新时间戳，确保key变化，触发DOM重新渲染
    uniqueTimestamp.value = Date.now();
    // 重置测量高度，等待重新测量
    timelineListHeight.value = 0;
    let savedScrollTop = 0;
    if (!isInitialLoad.value && timelineContainerRef.value) {
        savedScrollTop = timelineContainerRef.value.scrollTop || 0;
    }

    VE_API.monitor
        .farmWorkPlan({ farmId: props.farmId, containerId: props.containerId, schemeId: props.schemeId })
        .then(({ data, code }) => {
            if (code === 0) {
                const list = Array.isArray(data?.solarTermsList) ? data.solarTermsList : [];
                const filtered = list
                    .filter((t) => t && t.type === 1)
                    .map((t) => ({
                        id:
                            t.id ??
                            t.solarTermsId ??
                            t.termId ??
                            `${t.name || t.solarTermsName || t.termName || "term"}-${t.createDate || ""}`,
                        displayName: t.name || t.solarTermsName || t.termName || "节气",
                        createDate: t.createDate || null,
                        progress: Number(t.progress) || 0,
                    }));
                solarTerms.value = filtered;
                // 物候期数据
                phenologyList.value = Array.isArray(data?.phenologyList)
                    ? data.phenologyList.map((it) => {
                          const reproductiveList = Array.isArray(it.reproductiveList)
                              ? it.reproductiveList.map((r) => {
                                    const farmWorkArrangeList = Array.isArray(r.farmWorkArrangeList)
                                        ? r.farmWorkArrangeList.map((fw) => ({
                                              ...fw,
                                              containerSpaceTimeId: it.containerSpaceTimeId,
                                          }))
                                        : [];
                                    return {
                                        ...r,
                                        farmWorkArrangeList,
                                    };
                                })
                              : [];

                          return {
                              id: it.id ?? it.phenologyId ?? it.name ?? `${it.progress}-${it.progress2}`,
                              progress: Number(it.progress) || 0, // 起点 %
                              progress2: Number(it.progress2) || 0, // 终点 %
                              startTimeMs: safeParseDate(
                                  it.startDate || it.beginDate || it.startTime || it.start || it.start_at
                              ),
                              reproductiveList,
                          };
                      })
                    : [];

                // 使用多次 nextTick 和 requestAnimationFrame 确保DOM完全渲染
                nextTick(() => {
                    requestAnimationFrame(() => {
                        nextTick(() => {
                            requestAnimationFrame(() => {
                                // 测量timeline-list的实际渲染高度
                                if (timelineListRef.value) {
                                    const height =
                                        timelineListRef.value.offsetHeight || timelineListRef.value.clientHeight;
                                    if (height > 0) {
                                        timelineListHeight.value = height;

                                        // 如果是首次加载，滚动到当前季节对应的节气
                                        if (isInitialLoad.value) {
                                            const currentSeason = getCurrentSeason();
                                            handleSeasonClick(currentSeason);
                                            isInitialLoad.value = false;
                                        }
                                    }
                                }

                                if (isInitialLoad.value) {
                                    // 如果测量失败，延迟一下再尝试滚动
                                    setTimeout(() => {
                                        if (timelineListRef.value) {
                                            const height =
                                                timelineListRef.value.offsetHeight ||
                                                timelineListRef.value.clientHeight;
                                            if (height > 0) {
                                                timelineListHeight.value = height;
                                            }
                                        }
                                        const currentSeason = getCurrentSeason();
                                        handleSeasonClick(currentSeason);
                                        isInitialLoad.value = false;
                                    }, 200);
                                } else if (timelineContainerRef.value && savedScrollTop > 0) {
                                    timelineContainerRef.value.scrollTop = savedScrollTop;
                                }
                            });
                        });
                    });
                });

                // 收集所有farmWorkId
                const farmWorkIds = [];
                const farmWorks = [];
                phenologyList.value.forEach((phenology) => {
                    if (Array.isArray(phenology.reproductiveList)) {
                        phenology.reproductiveList.forEach((reproductive) => {
                            if (Array.isArray(reproductive.farmWorkArrangeList)) {
                                reproductive.farmWorkArrangeList.forEach((farmWork) => {
                                    if (farmWork.farmWorkId && farmWork.isFollow !== 0) {
                                        farmWorkIds.push(farmWork.farmWorkId);
                                        farmWorks.push(farmWork);
                                    }
                                });
                            }
                        });
                    }
                });

                // 调用验证方法，传入所有ids
                if (farmWorkIds.length > 0) {
                    batchValidatePesticideFertilizerQuotes(farmWorkIds, farmWorks);
                }
            }
        })
        .catch((error) => {
            console.error("获取农事规划数据失败:", error);
            ElMessage.error("获取农事规划数据失败");
        });
};

const updateFarmWorkPlan = () => {
    solarTerms.value = [];
    phenologyList.value = [];
    getFarmWorkPlan();
};

watch(
    () => props.farmId || props.containerId,
    (val) => {
        if (val) {
            isInitialLoad.value = true;
            updateFarmWorkPlan();
        }
    },
    { immediate: true }
);
watch(
    () => props.schemeId,
    (val) => {
        if (val) {
            updateFarmWorkPlan();
        }
    }
);

// 使用 ResizeObserver 监听高度变化，确保在DOM完全渲染后获取准确高度
const setupResizeObserver = () => {
    if (!timelineListRef.value || typeof ResizeObserver === "undefined") {
        return;
    }

    // 如果已经存在观察者，先断开
    if (resizeObserver) {
        resizeObserver.disconnect();
    }

    // 创建新的观察者
    resizeObserver = new ResizeObserver((entries) => {
        for (const entry of entries) {
            const height = entry.contentRect.height;
            if (height > 0 && height !== timelineListHeight.value) {
                timelineListHeight.value = height;
            }
        }
    });

    // 开始观察
    resizeObserver.observe(timelineListRef.value);
};

// 组件挂载后设置 ResizeObserver
onMounted(() => {
    nextTick(() => {
        requestAnimationFrame(() => {
            setupResizeObserver();
        });
    });
});

// 组件卸载前清理 ResizeObserver
onUnmounted(() => {
    if (resizeObserver) {
        resizeObserver.disconnect();
        resizeObserver = null;
    }
});

// 在数据更新后重新设置 ResizeObserver
watch(
    () => phenologyList.value.length,
    () => {
        nextTick(() => {
            requestAnimationFrame(() => {
                setupResizeObserver();
            });
        });
    }
);
</script>

<style scoped lang="scss">
.timeline-container {
    height: 100%;
    overflow: auto;
    position: relative;
    box-sizing: border-box;
    .timeline-list {
        position: relative;
    }
    .timeline-middle-line {
        position: absolute;
        left: 15px; /* 位于节气文字列中间（列宽约30px） */
        top: 0;
        bottom: 0;
        width: 2px;
        background: #e8e8e8;
        z-index: 1;
    }
    .phenology-bar {
        align-items: stretch;
        justify-content: center;
        box-sizing: border-box;
        .reproductive-item {
            font-size: 12px;
            text-align: center;
            word-break: break-all;
            writing-mode: vertical-rl;
            text-orientation: upright;
            letter-spacing: 3px;
            width: 100%;
            line-height: 23px;
            color: inherit;
            position: relative;
            .phenology-name {
                width: 26px;
                height: 100%;
                background: #2199f8;
                color: #fff;
                border-radius: 2px;
                padding: 5px 0;
            }
            .arranges {
                display: flex;
                max-width: calc(100vw - 84px);
                min-width: calc(100vw - 84px);
                gap: 10px;
                letter-spacing: 0px;
                .arrange-card {
                    width: 93%;
                    border: 0.5px solid #2199f8;
                    border-radius: 8px;
                    background: #fff;
                    box-sizing: border-box;
                    position: relative;
                    padding: 8px;
                    writing-mode: horizontal-tb;
                    .card-header {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .header-left {
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            .farm-work-name {
                                font-size: 14px;
                                font-weight: 500;
                                color: #1d2129;
                            }
                            .tag-standard {
                                padding: 0 8px;
                                background: rgba(119, 119, 119, 0.1);
                                border-radius: 25px;
                                font-weight: 400;
                                font-size: 12px;
                                color: #000;
                            }
                        }
                        .header-right {
                            font-size: 12px;
                            color: #808080;
                            padding: 0 8px;
                            border-radius: 25px;
                        }
                    }
                    .card-content {
                        color: #909090;
                        text-align: left;
                        line-height: 1.55;
                        margin: 4px 0 2px 0;
                        .edit-link {
                            color: #2199f8;
                            margin-left: 5px;
                        }
                        .link-warning {
                            color: #ff953d;
                            margin-left: 5px;
                        }
                    }
                    .card-status {
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        background: rgba(255, 149, 61, 0.1);
                        border-radius: 3px;
                        color: #ff953d;
                        padding: 0 6px;
                        display: flex;
                        align-items: center;
                        gap: 4px;
                        font-size: 12px;
                    }
                    &::before {
                        content: "";
                        position: absolute;
                        left: -5px;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 0;
                        height: 0;
                        border-top: 5px solid transparent;
                        border-bottom: 5px solid transparent;
                        border-right: 5px solid #2199f8;
                    }
                }
                .arrange-card.normal-style {
                    opacity: 0.3;
                }
                .arrange-card.status-warning {
                    border-color: #ff953d;
                    &::before {
                        border-right-color: #ff953d;
                    }
                }
                .arrange-card.status-complete {
                    border-color: #1ca900;
                    &::before {
                        border-right-color: #1ca900;
                    }
                }
                .arrange-card.status-normal {
                    border-color: #2199f8;
                    &::before {
                        border-right-color: #2199f8;
                    }
                }
            }
        }
    }
    .reproductive-item + .reproductive-item {
        padding-top: 3px;
    }
    .phenology-bar + .phenology-bar {
        padding-top: 3px;
    }
    .timeline-term {
        position: absolute;
        width: 30px;
        padding-right: 16px;
        display: flex;
        align-items: flex-start;
        z-index: 2; /* 置于中线之上 */
        .term-name {
            display: inline-block;
            width: 100%;
            min-height: 35px;
            line-height: 30px;
            background: #f5f7fb;
            font-size: 13px;
            word-break: break-all;
            writing-mode: vertical-rl;
            text-orientation: upright;
            color: rgba(174, 174, 174, 0.6);
            text-align: center;
        }
    }
}
</style>