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

<template>
    <div class="plan-page">
        <custom-header :name="pageType === 'plant' ? '种植方案' : '农事规划'"></custom-header>
        <div class="plan-content">
            <div class="plan-content-header" v-if="pageType === 'plant'">
                <el-select class="select-item" v-model="value" placeholder="选择品类">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <tab-list type="light" v-model="active" :tabs="tabs" @change="handleTabChange" />
            </div>
            <div
                class="timeline-container"
                ref="timelineContainerRef"
                :class="{ 'timeline-container-plant': pageType === 'plant' }"
            >
                <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>{{ fw.warmReminder || "暂无提示" }}</span>
                                            <span class="edit-link" @click.stop="handleEdit(fw)">点击编辑</span>
                                        </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-group">
                <div class="bottom-btn secondary-btn" @click="handlePhenologySetting">物候期设置</div>
                <div class="bottom-btn secondary-btn" v-if="pageType === 'plant'" @click="openCopyPlanPopup">
                    {{ active === 1 ? "复制方案" : "方案设置" }}
                </div>
            </div>
            <div class="bottom-btn primary-btn" @click="addNewTask">新增农事</div>
        </div>
    </div>
    <!-- 农事信息弹窗 -->
    <detail-dialog ref="detailDialogRef" @triggerFarmWork="triggerFarmWork"></detail-dialog>
    <!-- 互动设置弹窗 -->
    <interact-popup
        ref="interactPopupRef"
        @handleSaveSuccess="getFarmWorkPlan"
        @handleDeleteInteract="handleDeleteInteract"
    ></interact-popup>
    <!-- 复制方案弹窗 -->
    <Popup v-model:show="showCopyPlan" class="copy-plan-popup" round closeable :close-on-click-overlay="false">
        <div class="copy-plan-content">
            <div class="label">{{ active === 1 ? "复制为" : "方案名称" }}</div>
            <el-input v-model="copyPlanName" size="large" placeholder="请输入方案名称" class="copy-plan-input" />
        </div>
        <div class="copy-plan-footer">
            <div class="btn btn-cancel" @click="handleCancelCopyPlan">{{ active === 1 ? "取消复制" : "删除方案" }}</div>
            <div class="btn btn-confirm" @click="handleConfirmCopyPlan">
                {{ active === 1 ? "确定复制" : "确定设置" }}
            </div>
        </div>
    </Popup>
    <!-- 物候期设置弹窗 -->
    <Popup
        v-model:show="showPhenologySetting"
        class="copy-plan-popup phenology-popup"
        round
        closeable
        :close-on-click-overlay="false"
    >
        <div class="phenology-header">物候期时间设置</div>
        <div class="phenology-list">
            <div
                class="phenology-item"
                v-for="(item, index) in mergedReproductiveList"
                :key="item.id || index"
            >
                <div class="item-label">
                    <span class="label-text">{{ item.name }}</span>
                    <span>起始时间</span>
                </div>
                <div class="item-value">
                    <el-date-picker
                        style="width: 100%"
                        size="large"
                        value-format="YYYY-MM-DD"
                        v-model="item.startDate"
                        type="date"
                        placeholder="选择日期"
                    />
                </div>
            </div>
        </div>
        <div class="phenology-footer" @click="handleConfirmPhenologySetting">确认设置</div>
    </Popup>
</template>

<script setup>
import { ref, onMounted, computed, nextTick } from "vue";
import { Popup } from "vant";
import customHeader from "@/components/customHeader.vue";
import tabList from "@/components/pageComponents/TabList.vue";
import { useRouter, useRoute } from "vue-router";
import detailDialog from "@/components/detailDialog.vue";
import eventBus from "@/api/eventBus";
import interactPopup from "@/components/popup/interactPopup.vue";
import { ElMessage } from "element-plus";
const router = useRouter();
const route = useRoute();

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月
    }
};

const active = ref(1);
const tabs = ref([
    {
        id: 1,
        name: "标准化方案",
    },
    {
        id: 2,
        name: "全托管方案",
    },
    {
        id: 3,
        name: "半托管方案",
    },
]);
const handleTabChange = (id, item) => {
    active.value = id;
    console.log(id, item);
};

const value = ref("1");
const options = ref([
    {
        value: "1",
        label: "荔枝",
    },
    {
        value: "2",
        label: "全托管方案",
    },
]);

const pageType = ref("");
onMounted(() => {
    pageType.value = route.query.pageType || "";
    getFarmWorkPlan();
});

const mergedReproductiveList = ref([])
const getPhenologyList = async (containerSpaceTimeId) => {
    const res = await VE_API.monitor.listPhenology({ containerSpaceTimeId ,farmId: route.query.farmId });
    if (res.code === 0) {
        mergedReproductiveList.value = res.data || [];
    }
};

// 复制方案弹窗相关
const showCopyPlan = ref(false);
const showPhenologySetting = ref(false);
const copyPlanName = ref("");
const openCopyPlanPopup = () => {
    copyPlanName.value = "";
    showCopyPlan.value = true;
};

// 物候期设置弹窗
const handlePhenologySetting = () => {
    showPhenologySetting.value = true;
};

/**
 * 确认物候期设置
 */
const handleConfirmPhenologySetting = async () => {
    console.log(mergedReproductiveList.value);
    const params = {
        farmId: route.query.farmId,
        items: mergedReproductiveList.value.map(item => ({
            phenologyId: item.id,
            startDate: item.startDate,
        })),
    };
    const res = await VE_API.monitor.batchSaveFarmPhenologyTime(params);
    if (res.code === 0) {
        ElMessage.success("设置成功");
        showPhenologySetting.value = false;
        getFarmWorkPlan();
    }
};
// 取消复制方案
const handleCancelCopyPlan = () => {
    showCopyPlan.value = false;
};

// 确定复制方案
const handleConfirmCopyPlan = () => {
    if (!copyPlanName.value.trim()) {
        ElMessage.warning("请输入方案名称");
        return;
    }
    // TODO: 在此处调用复制方案的接口
    ElMessage.success("复制成功");
    showCopyPlan.value = false;
};

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 : [];
                getPhenologyList(data.phenologyList[0]?.containerSpaceTimeId)
                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,
                          };
                      })
                    : [];

                // 等待 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 addNewTask = () => {
    ElMessage.warning("该功能正在升级中，敬请期待");
};

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

const curFarmObj = ref({});
const handleRowClick = (item) => {
    curFarmObj.value = item;
    router.push({
        path: "/modify",
        query: { id: item.id, farmId: route.query.farmId, farmWorkId: item.farmWorkId, containerSpaceTimeId: item.containerSpaceTimeId, agriculturalStoreId: route.query.agriculturalStoreId },
    });
};

const interactPopupRef = ref(null);

const handleEdit = (item) => {
    console.log(item);
    if (interactPopupRef.value) {
        interactPopupRef.value.showPopup(item);
    }
};

const handleDeleteInteract = (params) => {
    getFarmWorkPlan();
};

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) * 1200;
    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) * 1200;
    // 将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) => {
    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) * 1200;
    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) * 1200; // 有效绘制区高度（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) * 1200;
    // 将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;
};
</script>

<style scoped lang="scss">
.plan-page {
    width: 100%;
    height: 100vh;
    background: #f5f7fb;
    .plan-content {
        padding: 12px 0;
        .plan-content-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 10px;
            margin-left: 12px;
            .select-item {
                width: 82px;
                ::v-deep {
                    .el-select__wrapper {
                        box-shadow: none;
                        border-radius: 25px;
                        border: 0.5px solid rgba(153, 153, 153, 0.5);
                    }
                }
            }
        }

        .timeline-container {
            height: calc(100vh - 40px - 73px);
            overflow: auto;
            position: relative;
            box-sizing: border-box;
            padding: 0 12px;
            &.timeline-container-plant {
                height: calc(100vh - 40px - 73px - 38px);
            }
            .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;
                .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: 40px; /* 列与中线右侧一段距离 */
                        top: 0;
                        z-index: 3;
                        display: flex;
                        max-width: calc(100vw - 100px);
                        gap: 12px;
                        letter-spacing: 0px;
                        .arrange-card {
                            width: 97%;
                            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;
                                }
                            }
                            .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: #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;
                }
            }
        }
    }
    // 控制区域样式
    .custom-bottom-fixed-btns {
        .bottom-btn-group {
            display: flex;
            gap: 12px;
        }
    }
}
.copy-plan-popup {
    width: 100%;
    padding: 50px 12px 20px 12px;
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 136px;
        background: url("@/assets/img/monitor/popup-header-bg.png") no-repeat center center / 100% 100%;
    }
    .copy-plan-content {
        display: flex;
        align-items: center;
        gap: 12px;
        .label {
            font-size: 16px;
            font-weight: 500;
        }
        .copy-plan-input {
            width: calc(100% - 80px);
        }
    }
    .copy-plan-footer {
        display: flex;
        gap: 12px;
        margin-top: 20px;
        .btn {
            flex: 1;
            color: #666666;
            border: 1px solid #999999;
            border-radius: 25px;
            padding: 10px 0;
            font-size: 16px;
            text-align: center;
            &.btn-confirm {
                color: #fff;
                border: 1px solid #2199f8;
                background: #2199f8;
            }
        }
    }
}

.phenology-popup {
    padding: 28px 20px 20px;
    .phenology-header {
        font-size: 24px;
        text-align: center;
        margin-bottom: 20px;
        font-family: "PangMenZhengDao";
    }
    .phenology-list {
        width: 100%;
        .phenology-item {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .item-label {
                display: flex;
                align-items: center;
                gap: 4px;
                font-size: 15px;
                color: rgba(0, 0, 0, 0.4);
                .label-text {
                    color: #000;
                    font-size: 16px;
                    font-weight: 500;
                }
            }
            .item-value {
                width: calc(100% - 156px);
            }
        }
        .phenology-item + .phenology-item {
            margin-top: 10px;
        }
    }
    .phenology-footer{
        width: 100%;
        text-align: center;
        font-size: 16px;
        margin-top: 20px;
        color: #fff;
        background: #2199f8;
        border-radius: 25px;
        padding: 10px 0;
    }
}
</style>