feiniao-farm-h5/src/views/old_mini/monitor/subPages/plan.vue

<template>
    <div class="plan-page">
        <custom-header name="农事规划"></custom-header>
        <div class="plan-content">
            <div class="timeline-container" ref="timelineContainerRef">
                <div class="timeline-list" :style="getListStyle">
                    <div class="timeline-middle-line"></div>
                    <!-- 物候期覆盖条（progress 为起点，progress2 为终点，单位 %） -->
                    <div
                        v-for="(p, idx) in phenologyList"
                        :key="p.id ?? idx"
                        class="phenology-bar"
                        :style="getPhenologyBarStyle(p)"
                    >
                        <div class="reproductive-list">
                            <div
                                v-for="(r, rIdx) in Array.isArray(p.reproductiveList) ? p.reproductiveList : []"
                                :key="r.id ?? rIdx"
                                class="reproductive-item"
                                :class="{
                                    'horizontal-text': getReproductiveItemHeight(p) < 30,
                                    'vertical-lr-text': getReproductiveItemHeight(p) >= 30,
                                }"
                                :style="
                                    getReproductiveItemHeight(p) < 30
                                        ? { '--item-height': `${getReproductiveItemHeight(p)}px` }
                                        : {}
                                "
                            >
                                {{ r.name }}
                                <div class="arranges">
                                    <div
                                        v-for="(fw, aIdx) in Array.isArray(r.farmWorkArrangeList)
                                            ? r.farmWorkArrangeList
                                            : []"
                                        :key="fw.id ?? aIdx"
                                        class="arrange-card"
                                        :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">标准农事</span>
                                            </div>
                                            <div class="header-right">托管农事</div>
                                        </div>
                                        <div class="card-content">
                                            <span>温馨提示：在某某物候期之后，请密切关注荔枝，关注蒂蛀虫的出现！</span>
                                            <span class="edit-link" @click.stop="handleEdit(fw)">编辑</span>
                                        </div>
                                        <div class="card-divider"></div>
                                        <div class="card-footer" @click.stop="handleRowClick(fw)">查看详情</div>
                                        <div
                                            v-if="
                                                getArrangeStatusClass(fw) === 'status-complete' ||
                                                getArrangeStatusClass(fw) === 'status-warning'
                                            "
                                            class="status-icon"
                                            :class="getArrangeStatusClass(fw)"
                                        >
                                            <el-icon
                                                v-if="getArrangeStatusClass(fw) === 'status-complete'"
                                                size="16"
                                                color="#1CA900"
                                            >
                                                <SuccessFilled />
                                            </el-icon>
                                            <el-icon v-else size="18" color="#FF953D">
                                                <WarnTriangleFilled />
                                            </el-icon>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-for="t in solarTerms" :key="t.id" class="timeline-term" :style="getTermStyle(t)">
                        <span class="term-name">{{ t.displayName }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="custom-bottom-fixed-btns">
            <div class="bottom-btn primary-btn" @click="addNewTask">新增农事</div>
        </div>
    </div>
    <!-- 农事信息弹窗 -->
    <detail-dialog ref="detailDialogRef" @triggerFarmWork="triggerFarmWork"></detail-dialog>
    <!-- 新增：激活上传弹窗 -->
    <active-upload-popup @handleUploadSuccess="getFarmWorkPlan"></active-upload-popup>
</template>

<script setup>
import { reactive, ref, onMounted, computed, nextTick } from "vue";
import customHeader from "@/components/customHeader.vue";
import { useRouter, useRoute } from "vue-router";
import detailDialog from "@/components/detailDialog.vue";
import eventBus from "@/api/eventBus";
import activeUploadPopup from "@/components/popup/activeUploadPopup.vue";
import { ElMessage } from "element-plus";
import { SuccessFilled, WarningFilled } from "@element-plus/icons-vue";
const router = useRouter();
const route = useRoute();

// 状态列表数据
const seasons = reactive([
    { value: "spring", label: "春季" },
    { value: "summer", label: "夏季" },
    { value: "autumn", label: "秋季" },
    { value: "winter", label: "冬季" },
]);
const activeSeason = ref("");

const statusList = reactive([
    { value: "pending", label: "待触发", color: "gray" },
    { value: "executing", label: "待完成", color: "blue" },
    { value: "completed", label: "已完成", color: "green" },
    { value: "expired", label: "已过期", color: "orange" },
]);

const solarTerms = ref([]);
const phenologyList = ref([]);

// 获取当前季节
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"; // 冬季：12-2月
    }
};

onMounted(() => {
    getFarmWorkPlan();
});

const getFarmWorkPlan = () => {
    // 如果不是首次加载，保存当前滚动位置
    let savedScrollTop = 0;
    if (!isInitialLoad.value && timelineContainerRef.value) {
        savedScrollTop = timelineContainerRef.value.scrollTop || 0;
    }

    VE_API.monitor
        .farmWorkPlan({ farmId: route.query.farmId })
        .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) => ({
                          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: Array.isArray(it.reproductiveList) ? it.reproductiveList : [],
                      }))
                    : [];

                // 等待 DOM 更新后处理滚动
                nextTick(() => {
                    if (isInitialLoad.value) {
                        // 首次加载：设置默认季节为当前季节，并自动滚动到对应位置
                        const currentSeason = getCurrentSeason();
                        handleSeasonClick(currentSeason);
                        isInitialLoad.value = false;
                    } else {
                        // 非首次加载：恢复之前的滚动位置
                        if (timelineContainerRef.value && savedScrollTop > 0) {
                            timelineContainerRef.value.scrollTop = savedScrollTop;
                        }
                    }
                });
            }
        })
        .catch((error) => {
            console.error("获取农事规划数据失败:", error);
        });
};

// 切换开关状态
const isDefaultEnabled = ref(true);
// 新增农事
const addNewTask = () => {
    ElMessage.warning("该功能正在升级中，敬请期待");
    // router.push({
    //     path: "/modify_work",
    //     query: { data: JSON.stringify(["生长异常"]), gardenId: 766, isAdd: true },
    // });
};

const triggerFarmWork = () => {
    eventBus.emit("activeUpload:show", {
        gardenIdVal: route.query.farmId,
        problemTitleVal: "请选择您出现" + curFarmObj.value.farmWorkName + "的时间",
        arrangeIdVal: curFarmObj.value.id,
    });
};

const curFarmObj = ref({});
const handleRowClick = (item) => {
    curFarmObj.value = item;
    // 0:默认，1-4:正常，5:完成，6:预警
    if (item.flowStatus === 5) {
        router.push({
            path: "/review_work",
            query: {
                miniJson: JSON.stringify({ id: item.farmWorkRecordId, goBack: true }),
            },
        });
    } else if (item.flowStatus === null) {
        detailDialogRef.value.showDialog(item.farmWorkId);
    } else if (item.flowStatus === 6 || (item.flowStatus < 5 && item.flowStatus >= 0)) {
        router.push({
            path: "/completed_work",
            query: {
                miniJson: JSON.stringify({ id: item.farmWorkRecordId }),
            },
        });
    }
};

const handleEdit = (item) => {
    // 处理编辑逻辑
    ElMessage.info("编辑功能开发中");
    // 可以在这里添加编辑逻辑，比如打开编辑弹窗等
};

const manageTask = () => {
    router.push({
        path: "/agri_services_manage",
        query: {
            type: "manage",
        },
    });
};

const detailDialogRef = ref(null);
const timelineContainerRef = ref(null);
// 标记是否为首次加载
const isInitialLoad = ref(true);

// 安全解析时间到时间戳（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;
};

// 计算最小progress值（第一个节气的progress）
const minProgress = computed(() => {
    if (!solarTerms.value || solarTerms.value.length === 0) return 0;
    const progresses = solarTerms.value.map((t) => Number(t?.progress) || 0).filter((p) => !isNaN(p));
    return progresses.length > 0 ? Math.min(...progresses) : 0;
});

// 计算最大progress值
const maxProgress = computed(() => {
    if (!solarTerms.value || solarTerms.value.length === 0) return 100;
    const progresses = solarTerms.value.map((t) => Number(t?.progress) || 0).filter((p) => !isNaN(p));
    return progresses.length > 0 ? Math.max(...progresses) : 100;
});

// 计算节气列表容器高度与项位置
const getListStyle = computed(() => {
    const minP = minProgress.value;
    const maxP = maxProgress.value;
    const range = Math.max(1, maxP - minP); // 避免除0
    const total = (solarTerms.value?.length || 0) * 320;
    const minH = total; // 无上下留白
    return { minHeight: `${minH}px` };
});

const getTermStyle = (t) => {
    const p = Math.max(0, Math.min(100, Number(t?.progress) || 0));
    const minP = minProgress.value;
    const maxP = maxProgress.value;
    const range = Math.max(1, maxP - minP); // 避免除0
    const total = (solarTerms.value?.length || 0) * 320;
    // 将progress映射到0开始的位置，最小progress对应top: 0
    const normalizedP = range > 0 ? ((p - minP) / range) * 100 : 0;
    const top = (normalizedP / 100) * total;
    return {
        position: "absolute",
        top: `${top}px`,
        left: 0,
        width: "30px",
        height: "20px",
        display: "flex",
        alignItems: "flex-start",
    };
};

// 点击季节 → 滚动到对应节气（立春/立夏/立秋/立冬）
const handleSeasonClick = (seasonValue) => {
    activeSeason.value = seasonValue;
    const mapping = {
        spring: "立春",
        summer: "立夏",
        autumn: "立秋",
        winter: "立冬",
    };
    const targetName = mapping[seasonValue];
    if (!targetName) return;
    const target = (solarTerms.value || []).find((t) => (t?.displayName || "") === targetName);
    if (!target) return;
    const p = Math.max(0, Math.min(100, Number(target.progress) || 0));
    const minP = minProgress.value;
    const maxP = maxProgress.value;
    const range = Math.max(1, maxP - minP);
    const total = (solarTerms.value?.length || 0) * 320;
    const normalizedP = range > 0 ? ((p - minP) / range) * 100 : 0;
    const targetTop = (normalizedP / 100) * total; // 内容内的像素位置
    const wrap = timelineContainerRef.value;
    if (!wrap) return;
    const viewH = wrap.clientHeight || 0;
    const maxScroll = Math.max(0, wrap.scrollHeight - viewH);
    // 将目标位置稍微靠上（使用 0.35 视口高度做偏移）
    let scrollTop = Math.max(0, targetTop - viewH * 0.1);
    if (scrollTop > maxScroll) scrollTop = maxScroll;
    wrap.scrollTo({ top: scrollTop, behavior: "smooth" });
};

// 物候期覆盖条样式（使用像素计算，避免 100% 高度为 0 的问题）
const getPhenologyBarStyle = (item) => {
    const p1 = Math.max(0, Math.min(100, Number(item?.progress) || 0));
    const p2 = Math.max(0, Math.min(100, Number(item?.progress2) || 0));
    const start = Math.min(p1, p2);
    const end = Math.max(p1, p2);
    const minP = minProgress.value;
    const maxP = maxProgress.value;
    const range = Math.max(1, maxP - minP);
    const total = (solarTerms.value?.length || 0) * 320; // 有效绘制区高度（px）
    // 将progress映射到0开始的位置
    const normalizedStart = range > 0 ? ((start - minP) / range) * 100 : 0;
    const normalizedEnd = range > 0 ? ((end - minP) / range) * 100 : 0;
    let topPx = (normalizedStart / 100) * total;
    let heightPx = Math.max(2, ((normalizedEnd - normalizedStart) / 100) * total);

    // 计算第一个节气的位置（minProgress对应的位置，应该是0）
    const firstTermTop = 0; // 第一个节气在top: 0
    // 节气文字高度为46px，"小"字大约在文字的上半部分，约在15px位置
    // 让蓝色条的顶部对齐到"小"字的位置（firstTermTop + 15px）
    const minTop = firstTermTop + 10; // 对齐到"小"字位置（文字高度的约33%）
    if (topPx < minTop) {
        // 如果顶部小于最小位置，调整top和height
        const diff = minTop - topPx;
        topPx = minTop;
        heightPx = Math.max(2, heightPx - diff);
    }

    // 计算最后一个节气的位置（maxProgress对应的位置）
    const lastTermTop = (100 / 100) * total; // 因为normalizedEnd最大是100
    // 节气文字高度为46px，"至"字大约在文字的下半部分，约在30px位置
    // 让蓝色条的底部对齐到"至"字的位置（lastTermTop + 30px）
    const maxBottom = lastTermTop + 35; // 对齐到"至"字位置（文字高度的约65%）
    const barBottom = topPx + heightPx;
    if (barBottom > maxBottom) {
        heightPx = Math.max(2, maxBottom - topPx);
    }

    const now = Date.now();
    const isFuture = Number.isFinite(item?.startTimeMs) ? item.startTimeMs > now : start > 0; // 无开始时间时按起点>0近似
    // 反转：大于当前时间用灰色，小于等于当前时间用蓝色
    const barColor = isFuture ? "rgba(145, 145, 145, 0.1)" : "#2199F8";
    const beforeBg = isFuture ? "rgba(145, 145, 145, 0.1)" : "rgba(33, 153, 248, 0.1)";
    return {
        position: "absolute",
        left: "46px",
        width: "25px",
        top: `${topPx}px`,
        height: `${heightPx}px`,
        background: barColor,
        color: isFuture ? "#747778" : "#fff",
        "--bar-before-bg": beforeBg,
        zIndex: 2,
    };
};

// 农事状态样式映射（0:默认，1-4:正常，5:完成，6:预警）
const getArrangeStatusClass = (fw) => {
    const t = fw?.flowStatus;
    if (t == null) return "status-default";
    if (t >= 0 && t <= 4) return "status-normal";
    if (t === 5) return "status-complete";
    if (t === 6) return "status-warning";
    return "status-default";
};

// 计算 phenology-bar 的高度（px）
const getPhenologyBarHeight = (item) => {
    const p1 = Math.max(0, Math.min(100, Number(item?.progress) || 0));
    const p2 = Math.max(0, Math.min(100, Number(item?.progress2) || 0));
    const start = Math.min(p1, p2);
    const end = Math.max(p1, p2);
    const minP = minProgress.value;
    const maxP = maxProgress.value;
    const range = Math.max(1, maxP - minP);
    const total = (solarTerms.value?.length || 0) * 320;
    // 将progress映射到0开始的位置
    const normalizedStart = range > 0 ? ((start - minP) / range) * 100 : 0;
    const normalizedEnd = range > 0 ? ((end - minP) / range) * 100 : 0;
    const heightPx = Math.max(2, ((normalizedEnd - normalizedStart) / 100) * total);
    return heightPx;
};

// 计算 reproductive-item 的高度（px）
// 由于 reproductive-list 使用 grid-auto-rows: 1fr，每个 item 会等分 phenology-bar 的高度
const getReproductiveItemHeight = (phenologyItem) => {
    const barHeight = getPhenologyBarHeight(phenologyItem);
    const listLength = Array.isArray(phenologyItem?.reproductiveList) ? phenologyItem.reproductiveList.length : 1;
    // 如果列表为空，返回 barHeight；否则等分
    return listLength > 0 ? barHeight / listLength : barHeight;
};

// 根据文字长度返回对应的 class
const getTextLengthClass = (text) => {
    if (!text || typeof text !== "string") return "";
    const len = text.trim().length;
    if (len > 4 && len <= 6) return "text-4-6";
    if (len > 6 && len <= 8) return "text-7-8";
    return "";
};

// 处理文本，在括号前换行
const formatTextWithLineBreak = (text) => {
    if (!text || typeof text !== "string") return text;
    // 在左括号前添加换行符
    return text.replace(/([（(])/g, "\n$1");
};
</script>

<style scoped lang="scss">
.plan-page {
    width: 100%;
    height: 100vh;
    background: #fff;
    .plan-content {
        padding: 12px 0;
        .timeline-container {
            height: calc(100vh - 40px - 73px);
            overflow: auto;
            position: relative;
            box-sizing: border-box;
            padding: 0 12px;
            .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 {
                display: flex;
                align-items: stretch;
                justify-content: center;
                box-sizing: border-box;
                // &::before {
                //     content: "";
                //     position: absolute;
                //     top: 0;
                //     left: 25px;
                //     width: calc(100vw - 100px);
                //     height: 100%;
                //     background: var(--bar-before-bg, rgba(201, 201, 201, 0.1));
                //     z-index: 1;
                // }
                .reproductive-list {
                    display: grid;
                    grid-auto-rows: 1fr; /* 子项等高，整体等分父高度 */
                    align-items: stretch;
                    justify-items: center; /* 子项居中 */
                    width: 100%;
                    height: 100%;
                    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;
                    &.horizontal-text {
                        writing-mode: horizontal-tb;
                        text-orientation: mixed;
                        letter-spacing: normal;
                        line-height: calc(var(--item-height, 15px) - 3px);
                    }
                    &.vertical-lr-text {
                        writing-mode: vertical-lr;
                        text-orientation: upright;
                        letter-spacing: 3px;
                        line-height: 26px;
                    }
                    .arranges {
                        position: absolute;
                        left: 48px; /* 列与中线右侧一段距离 */
                        top: 0;
                        z-index: 3;
                        display: flex;
                        max-width: calc(100vw - 100px);
                        gap: 12px;
                        letter-spacing: 0px;
                        .arrange-card {
                            width: 94%;
                            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: 11px;
                                        color: #000;
                                    }
                                }
                                .header-right {
                                    font-size: 11px;
                                    color: #2199f8;
                                    padding: 0 8px;
                                    border-radius: 25px;
                                    // background: rgba(33, 153, 248, 0.1);
                                }
                            }
                            .card-content {
                                color: #909090;
                                text-align: left;
                                line-height: 1.55;
                                margin: 4px 0 10px 0;
                                .edit-link {
                                    color: #2199f8;
                                }
                            }
                            .card-divider {
                                height: 0.5px;
                                background: rgba(0, 0, 0, 0.1);
                            }
                            .card-footer {
                                text-align: center;
                                font-size: 12px;
                                color: #adadad;
                                padding-top: 6px;
                            }
                            .status-icon {
                                position: absolute;
                                right: -8px;
                                bottom: -8px;
                                z-index: 3;
                            }
                            &::before {
                                content: "";
                                position: absolute;
                                left: -6px;
                                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.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 {
                border-top: 2px solid #fff;
            }
            .phenology-bar + .phenology-bar {
                border-top: 2px solid #fff;
            }
            .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%;
                    height: 46px;
                    line-height: 30px;
                    background: #fff;
                    font-size: 13px;
                    word-break: break-all;
                    writing-mode: vertical-rl;
                    text-orientation: upright;
                    color: rgba(174, 174, 174, 0.6);
                    text-align: center;
                }
            }
        }
    }
    // 控制区域样式
    .custom-bottom-fixed-btns {
        justify-content: center;
        .primary-btn {
            padding: 10px 34px;
        }
    }
}
</style>